Vue NativeVue Native
Guide
Components
Composables
Navigation
  • iOS
  • Android
GitHub
Guide
Components
Composables
Navigation
  • iOS
  • Android
GitHub
  • Navigation
  • Stack Navigation
  • Passing Params

Navigation

Vue Native provides stack-based navigation via @vue-native/navigation.

Install

Navigation is included in the default project scaffold. To add it manually:

bun add @vue-native/navigation

Quick start

// app/main.ts
import { createApp } from '@vue-native/runtime'
import { createRouter } from '@vue-native/navigation'
import App from './App.vue'
import HomeView from './views/HomeView.vue'
import DetailView from './views/DetailView.vue'

const router = createRouter([
  { name: 'home', component: HomeView },
  { name: 'detail', component: DetailView },
])

createApp(App).use(router).start()
<!-- App.vue -->
<template>
  <RouterView />
</template>
<!-- HomeView.vue -->
<script setup>
import { useRouter } from '@vue-native/navigation'
const router = useRouter()
</script>

<template>
  <VView style="flex: 1; padding: 20">
    <VButton @press="router.push('detail', { id: 1 })">
      <VText>Open Detail</VText>
    </VButton>
  </VView>
</template>

See also

  • Stack navigation
  • Passing params
Edit this page
Last Updated: 2/23/26, 2:28 AM
Contributors: Abdul Hamid, Claude Sonnet 4.6, Claude Opus 4.6
Next
Stack Navigation