usePlatform

Returns the current platform the app is running on. Provides simple boolean flags for platform-specific logic. Values are determined at build time and are not reactive.

Usage

<script setup>
import { usePlatform } from '@thelacanians/vue-native-runtime'

const { platform, isIOS, isAndroid, isMacOS } = usePlatform()
</script>

<template>
  <VView>
    <VText>Running on: {{ platform }}</VText>
    <VText v-if="isIOS">Welcome, iOS user!</VText>
    <VText v-if="isAndroid">Welcome, Android user!</VText>
    <VText v-if="isMacOS">Welcome, macOS user!</VText>
  </VView>
</template>

API

usePlatform(): {
  platform: 'ios' | 'android' | 'macos'
  isIOS: boolean
  isAndroid: boolean
  isMacOS: boolean
  isApple: boolean
  isDesktop: boolean
  isMobile: boolean
}

Return Value

Property	Type	Description
`platform`	`'ios' \| 'android' \| 'macos'`	The current platform identifier.
`isIOS`	`boolean`	`true` if the app is running on iOS.
`isAndroid`	`boolean`	`true` if the app is running on Android.
`isMacOS`	`boolean`	`true` if the app is running on macOS.
`isApple`	`boolean`	`true` if the app is running on an Apple platform (iOS or macOS).
`isDesktop`	`boolean`	`true` if the app is running on a desktop platform (macOS).
`isMobile`	`boolean`	`true` if the app is running on a mobile platform (iOS or Android).

selectPlatform

selectPlatform picks a value for the current platform from a per-platform map — the equivalent of React Native's Platform.select. It is exported alongside usePlatform:

import { selectPlatform } from '@thelacanians/vue-native-runtime'

const shadow = selectPlatform({
  ios: { shadowRadius: 4 },
  android: { elevation: 4 },
  default: {},
})

Signature

selectPlatform<T>(spec: {
  ios?: T
  android?: T
  macos?: T
  apple?: T
  default?: T
}): T | undefined

Resolution order

The exact platform key (ios, android, or macos) if present.
Otherwise apple — used for both iOS and macOS when the exact key is absent.
Otherwise default.
If nothing matches, undefined.

Example

<script setup>
import { selectPlatform } from '@thelacanians/vue-native-runtime'

const headerHeight = selectPlatform({
  ios: 88,
  android: 56,
  macos: 44,
  default: 56,
})

const fontFamily = selectPlatform({
  apple: 'System',     // applies to both iOS and macOS
  android: 'Roboto',
  default: 'System',
})
</script>

<template>
  <VView :style="{ height: headerHeight }">
    <VText :style="{ fontFamily }">Platform-tuned header</VText>
  </VView>
</template>

Tips

Like usePlatform, selectPlatform resolves at build time from the __PLATFORM__ constant, so unused branches are eliminated in production builds.

Platform Support

Platform	Support
iOS	Returns `'ios'` as the platform value.
Android	Returns `'android'` as the platform value.
macOS	Returns `'macos'` as the platform value.

Example

<script setup>
import { usePlatform } from '@thelacanians/vue-native-runtime'

const { platform, isIOS, isAndroid, isMacOS, isApple, isDesktop, isMobile } = usePlatform()

const buttonStyle = {
  backgroundColor: isIOS ? '#007AFF' : isAndroid ? '#6200EE' : '#000000',
  borderRadius: isIOS || isMacOS ? 10 : 4,
  padding: isMacOS ? 8 : 12,
}
</script>

<template>
  <VView :style="{ flex: 1, padding: 20 }">
    <VText :style="{ fontSize: 18, marginBottom: 16 }">
      Platform-Specific Styling
    </VText>

    <VButton
      title="Native Button"
      :style="buttonStyle"
    />

    <VText v-if="isIOS" :style="{ marginTop: 12 }">
      Using San Francisco font defaults
    </VText>
    <VText v-if="isAndroid" :style="{ marginTop: 12 }">
      Using Roboto font defaults
    </VText>
    <VText v-if="isMacOS" :style="{ marginTop: 12 }">
      Running on macOS — menu bar and window controls are available
    </VText>
    <VText v-if="isApple" :style="{ marginTop: 8, color: '#888' }">
      Apple platform: {{ platform }}
    </VText>
    <VText v-if="isMobile" :style="{ marginTop: 8, color: '#888' }">
      Mobile platform — touch optimised layout
    </VText>
    <VText v-if="isDesktop" :style="{ marginTop: 8, color: '#888' }">
      Desktop platform — mouse and keyboard input expected
    </VText>
  </VView>
</template>

Notes

Return values are not reactive — they are plain values determined at build time, not Ref wrappers.
Uses the __PLATFORM__ compile-time constant injected by the Vite plugin during the build process.
The plugin resolves the target from a validated VUE_NATIVE_PLATFORM shell variable first, then an explicit vueNative({ platform }) option. The CLI supplies the variable for platform-targeted commands.
The CLI target overrides an explicit plugin option. With no environment target, the explicit option still applies.
Direct Vite builds default to 'ios' only when neither the option nor the environment variable is set.
Falls back to 'ios' if the __PLATFORM__ constant is not defined.
Since values are resolved at build time, dead code elimination can remove unused platform branches in production builds.
For conditional logic that does not need to be in a template, prefer using usePlatform over manual typeof checks or global variables.