tanstack-vue-router-skilld

@tanstack/vue-router

Type-safe router for Vue. Prepared source: version 1.170.35 (package.json:3).

• Requires vue >= 3.3.0 (peer), Node >= 20.19 (package.json:59-88)
• Runtime deps: @tanstack/[email protected], @tanstack/[email protected], @tanstack/vue-store@^0.11.0
• ESM-only ("type": "module"), no main/CJS entry
• Entry points: @tanstack/vue-router, @tanstack/vue-router/ssr/server, @tanstack/vue-router/ssr/client (package.json:29-50)

Docs: https://tanstack.com/router (framework pages verified at /router/latest/docs/framework/vue/...)

Hard rules

1. Most composables return Ref<T> — use .value in script; templates auto-unwrap. useRouter(), useNavigate(), useLinkProps(), useAwaited() do NOT return refs. Full table in references/composables.md.
2. Never cast or annotate inferred route/router types. Types come from the route tree and the Register declaration.
3. Register the router for type safety — without this, Link/useNavigate/useSearch accept any string:

declare module '@tanstack/vue-router' {
  interface Register {
    router: typeof router
  }
}

1. Not vue-router. Never import useRoute/useRouter from vue-router, never use <router-view>/<router-link>.
2. beforeLoad/loader are plain async functions. Vue composables (ref, computed, lifecycle hooks) cannot run inside them. Pass state through router context.
3. Route options accept Vue SFCs: component, errorComponent, notFoundComponent, pendingComponent and the default*Component router options take .vue files or h()-style function components (src/route.ts:54-58, src/router.ts:26-65).

Setup with Vite (file-based routing)

npm install @tanstack/vue-router
npm install -D @tanstack/router-plugin @vitejs/plugin-vue @vitejs/plugin-vue-jsx

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [
    tanstackRouter({ target: 'vue', autoCodeSplitting: true }), // before vue()
    vue(),
    vueJsx(), // needed for .tsx route files
  ],
})