Components

Vue Native provides 40 built-in components that map directly to native views on iOS, Android, and macOS.

Import

All components are globally registered — no import needed in templates.

Reading the tables

The three platform columns name the native view (or views) that backs the component on each OS.

• "JS-composed" means the component has no native factory of its own — it is assembled in TypeScript out of other components (and, for animation, useAnimation), so it behaves identically on all three platforms.
• "No-op" means the component is registered for API compatibility but renders nothing (or a hidden, zero-size placeholder). Your app will not crash or warn in production; it just gets no UI from that component on that platform.
• VToolbar, VSplitView, and VOutlineView are macOS-only — in development builds they log a console warning on iOS/Android and render nothing there.

Layout

Text & Input

Interactive

Media

Lists

Feedback

Navigation

System

Vue Built-ins

These are Vue's own components, re-exported so they cooperate with the custom renderer. They have no native view of their own and work identically on all three platforms.

Also registered globally

createApp() registers the 40 components above plus a few extras, so these need no import either:

KeepAlive is deliberately absent from Vue Native's own augmentation because @vue/runtime-core already declares it — the runtime re-exports Vue's KeepAlive unchanged.

<VNavigationBar> is the one documented component that is not globally registered: it lives in @thelacanians/vue-native-navigation, so import it from that package.

Platform-only components

Three components exist for macOS window chrome and render nothing elsewhere. Guard them with usePlatform() if you share screens across targets:

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

const { isMacOS } = usePlatform()
</script>

<template>
  <VToolbar v-if="isMacOS" :items="toolbarItems" @itemClick="onToolbarItem" />
  <VView v-else :style="{ flex: 1 }">
    <!-- mobile header -->
  </VView>
</template>

In development builds, mounting VToolbar, VSplitView, or VOutlineView on iOS or Android logs a console warning telling you the component renders nothing on that platform.