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
Install
skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld · repository language: MDX
git clone https://github.com/skilld-dev/vue-ecosystem-skills
cp -r vue-ecosystem-skills/skills/tanstack-vue-router-skilld ~/.claude/skills/tanstack-vue-router-skilldFrequently 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)
Read as markdown · JSON record · Browse the source repository
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