{"enrichment":{"faq":[{"a":"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.","q":"What is TanStack Vue Router and how does it differ from Vue Router?"},{"a":"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.","q":"How do you set up @tanstack/vue-router in a Vue application?"},{"a":"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.","q":"How to use @tanstack/vue-router with type-safe search params?"},{"a":"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.","q":"What are the best practices for tanstack vue-router debugging?"},{"a":"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.","q":"How do you migrate from deprecated router APIs to tanstack vue router?"},{"a":"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.","q":"How can you optimize code splitting and route loading in TanStack Vue Router?"}],"shadow_tags":["client-side-routing","type-safe-navigation","lazy-loading-routes","search-param-validation","data-fetching-patterns","route-guards-auth","url-transformation","view-transitions-api","bundle-optimization","router-context-injection"],"summary_rewrite":"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."},"files":[{"bytes":9274,"path":"skills/tanstack-vue-router-skilld/SKILL.md","sha256":"b0970d1dd43942a8ab3acf1acaff33eb4c3f030ab077e826dbd18e1e1a9401b3","url":"https://skillfed.io/files/skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld/7737e531/SKILL.md"}],"id":"skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld","links":{"html":"https://skillfed.io/skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld","md":"https://skillfed.io/skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld.md","repo":"https://github.com/skilld-dev/vue-ecosystem-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":8,"language":"MDX","last_updated":"2026-05-05","license":"MIT","name":"tanstack-vue-router-skilld","publisher":"skilld-dev","stars":173},"relations":{"similar":[{"id":"tanstack-skills/tanstack-skills/tanstack-router"},{"id":"secondsky/claude-skills/tanstack-router"},{"id":"skilld-dev/vue-ecosystem-skills/vue-router-skilld"},{"id":"oakoss/agent-skills/tanstack-router"},{"id":"samhvw8/dot-claude/frontend-development"},{"id":"jezweb/claude-skills/tanstack-start"},{"id":"samhvw8/dotfiles/frontend-development"},{"id":"clerk/skills/clerk-tanstack-patterns"},{"id":"bobmatnyc/claude-mpm-skills/vue"},{"id":"capawesome-team/skills/ionic-vue"}]},"slug":{"owner":"skilld-dev","repo":"vue-ecosystem-skills","skill":"tanstack-vue-router-skilld"},"version":"7737e531"}