Vue Router (@tanstack/vue-router)

This skill builds on router-core. Read router-core first for foundational concepts.

This skill covers the Vue-specific bindings, components, composables, and setup for TanStack Router.

CRITICAL: TanStack Router types are FULLY INFERRED. Never cast, never annotate inferred values.

CRITICAL: TanStack Router is CLIENT-FIRST. Loaders run on the client by default, not on the server.

CRITICAL: Most composables return Ref<T> — access via .value in script, auto-unwrapped in templates. This is the #1 difference from the React version.

CRITICAL: Do not confuse @tanstack/vue-router with vue-router (the official Vue router). They are completely different libraries with different APIs.

Full Setup: File-Based Routing with Vite

1. Install Dependencies