tanstack-vue-router-skilld
TanStack Vue Router delivers modern, scalable routing for Vue applications with factory-based APIs, validation adapters, and fine-grained code splitting. Configure routers with typed context, search param middleware, and native View Transitions, then debug and optimize using route hooks and structural sharing patterns.
TanStack Vue Router provides modern routing setup and configuration for Vue applications using @tanstack/vue-router.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-05-05
TanStack Vue Router provides modern routing setup and configuration for Vue applications using @tanstack/vue-router. TanStack Vue Router delivers modern, scalable routing for Vue applications with factory-based APIs, validation adapters, and fine-grained code splitting. Configure routers with typed context, search param middleware, and native View Transitions, then debug and optimize using route hooks and structural sharing patterns.
Use it when
- TanStack Vue Router setup begins by installing the package.
- TanStack Vue Router implements type-safe search params through validation adapters and middleware.
Verify before relying
Read SKILL.md below before installing (60 files). Open directory: indexed for reading, not audited.
Install
skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld · repository language: MDX
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is TanStack Vue Router and how does it differ from Vue Router?
TanStack Vue Router is a modern routing library for Vue applications built on factory-based APIs and type safety. Unlike traditional Vue Router, TanStack Vue Router delivers scalable routing with validation adapters, fine-grained code splitting, native View Transitions support, and structural sharing patterns. It emphasizes typed context, search param middleware, and route hooks for debugging and optimization.
How do you set up @tanstack/vue-router in a Vue application?
TanStack Vue Router setup begins by installing the package, then creating a router instance using factory functions with typed context configuration. Define your route tree with nested routes, configure loaders for data fetching, and apply validation adapters for search params. Mount the router in your Vue app and enable View Transitions for smooth navigation. Refer to the official guide for step-by-step configuration examples.
How to use @tanstack/vue-router with type-safe search params?
TanStack Vue Router implements type-safe search params through validation adapters and middleware. Define search param schemas in your route configuration, apply validators to enforce types at runtime, and use the router's search param middleware to intercept and transform query data. This ensures type safety across navigation and enables compile-time checking when paired with TypeScript.
What are the best practices for tanstack vue-router debugging?
TanStack Vue Router debugging leverages route hooks, structural sharing patterns, and the router's built-in logging. Use beforeLoad and onLoad hooks to trace navigation flow, inspect route context for state issues, and monitor code splitting performance. Enable debug mode in development, validate route definitions early, and use the browser DevTools to track state transitions and hook execution.
How do you migrate from deprecated router APIs to tanstack vue router?
TanStack Vue Router migration involves transitioning from traditional Vue Router to factory functions and new features. Replace route definitions with the route tree structure, update navigation calls to use the new API, implement loaders for data fetching instead of beforeEach guards, and adopt validation adapters for search params. Review the migration guide for deprecated patterns and refactor authentication and redirect logic using route hooks.
How can you optimize code splitting and route loading in TanStack Vue Router?
TanStack Vue Router optimizes performance through fine-grained code splitting and lazy-loaded route components. Define route loaders to prefetch data, use dynamic imports for route components, and leverage structural sharing to minimize re-renders. Configure route-level code splitting to load only necessary bundles, monitor loader execution with route hooks, and apply caching strategies for frequently accessed routes.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
TanStack/router @tanstack/vue-router
> Modern and scalable routing for Vue applications
Version: 1.166.7 (Mar 2026) Deps: @tanstack/vue-store@^0.9.1, @vue/runtime-dom@^3.5.25, isbot@^5.1.22, jsesc@^3.0.2, tiny-invariant@^1.3.3, tiny-warning@^1.0.3, @tanstack/history@1.161.4, @tanstack/router-core@1.166.7 Tags: latest: 1.166.7 (Mar 2026)
References: Docs — API reference, guides
API Changes
This section documents version-specific API changes — prioritize recent major/minor releases.
- BREAKING:
NotFoundRoute&routerOptions.notFoundRoute— deprecated in v1.x; usenotFoundComponentin route options ordefaultNotFoundComponentincreateRouterinstead source
-
(truncated - see the full file via the links below)
File tree — 15 files
skills/tanstack-vue-router-skilld/SKILL.md
skills/tanstack-vue-router-skilld/references/discussions/_INDEX.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6148.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6174.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6176.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6183.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6243.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6247.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6289.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6379.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6380.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6391.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6402.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6466.md
skills/tanstack-vue-router-skilld/references/discussions/discussion-6529.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up and configure TanStack Vue Router for modern Vue applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Vue Router v5 skill covers API changes from v4, including new exports like `vue-router/vite`, `vue-router/auto-routes`, and experimental data loaders. Get guidance on migration paths, typed routes, navigation guards, and routing best practices.
TanStack Router delivers fully type-safe routing for React applications using file-based route organization and automatic tree generation. It includes first-class search parameter validation, integrated data loading with loaders and deferred streaming, and deep TypeScript support throughout.
TanStack Router delivers type-safe, file-based routing for React single-page applications with automatic route generation and TypeScript validation. It includes built-in route loaders for data fetching, seamless TanStack Query integration, and first-class support for Cloudflare Workers deployment.
Tanstack Router delivers file-based routing for React with full type safety, route-level data loading, and search parameter validation. It handles code splitting, preloading strategies, and integrates seamlessly with TanStack Query for efficient data management. Use it to build structured navigation with automatic type inference for params, search values, and loader data.
TanStack Start scaffolds production-ready full-stack applications on Cloudflare Workers from scratch, with server-side rendering, file-based routing, and integrated authentication. Every file is generated fresh—no templates or clones—using React 19, Tailwind v4, shadcn/ui, D1 databases, Drizzle ORM, and better-auth for OAuth and email/password flows.
This skill covers authentication patterns for TanStack React Start, showing how to protect routes with beforeLoad guards, implement auth in server functions, and configure Clerk middleware on Vinxi. Learn the mental model of two-layer auth flow and avoid common setup mistakes.