{"enrichment":{"faq":[{"a":"Vue-router-skilld covers significant API evolution in v5. Key changes include new module exports like `vue-router/vite` for Vite integration and `vue-router/auto-routes` for file-based routing. The router instance creation, navigation guard signatures, and data loader patterns have been refined. Migration from v4 to v5 requires updating import statements, guard implementations, and leveraging new TypeScript-first route typing. Consult the migration path guidance within vue-router-skilld for detailed breaking changes and deprecation notices.","q":"What are the main vue-router v5.0.6 API changes from v4?"},{"a":"Vue-router-skilld explains that the Vite plugin is imported from `vue-router/vite`. After installing vue-router v5, add it to your Vite config's plugins array. This plugin enables file-based routing auto-generation and optimizes route resolution during development and build. Vue-router-skilld provides setup examples showing how to configure the plugin alongside other Vite middleware and ensure proper route discovery from your file structure.","q":"How do I import the vue-router Vite plugin?"},{"a":"Vue-router-skilld covers data loaders as an experimental feature in v5 that integrates with navigation lifecycle control. Data loaders allow you to fetch route-specific data before navigation completes, improving UX by preventing blank states. Vue-router-skilld guides you through defining loaders on route records, controlling when they execute relative to navigation guards, and integrating with state management like Pinia Colada. This pattern replaces older beforeEnter guard data-fetching approaches.","q":"How do I set up data loaders with vue-router?"},{"a":"Vue-router-skilld emphasizes TypeScript support as a core v5 feature. Define route meta fields with strict typing by extending the RouteMeta interface, then reference them in your route definitions. Use `useRoute()` from the Composition API to access typed route properties. Vue-router-skilld shows how to leverage `vue-router/auto-routes` for automatic type generation from file-based routing, eliminating manual route definition boilerplate while maintaining full type safety.","q":"How do I configure typed routes and route meta in TypeScript?"},{"a":"Vue-router-skilld recommends using `beforeEach` for global guards, `beforeResolve` for pre-navigation resolution, and route-level guards for specific logic. Distinguish between `beforeEach` (runs before every navigation) and `beforeResolve` (runs after async components load). Vue-router-skilld provides debugging strategies: enable router logs, inspect navigation failures with guard return values, use browser DevTools, and validate guard injection patterns when using Pinia. Common issues include guard infinite loops and improper async handling.","q":"What are navigation guard best practices and how do I debug routing issues?"},{"a":"Vue-router-skilld explains that file-based routing is enabled via the `vue-router/auto-routes` export combined with the Vite plugin. Place route components in a designated directory (typically `src/pages`), and the plugin automatically generates route definitions matching your file structure. Vue-router-skilld covers naming conventions, nested route organization, and dynamic segment syntax. This approach reduces manual route configuration while keeping your routing logic co-located with components.","q":"How does vue-router handle file-based routing and auto-routes?"}],"shadow_tags":["routing-library","spa-navigation","type-safety","data-fetching","migration-guide","plugin-ecosystem","file-based-routes","guard-patterns"],"summary_rewrite":"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."},"files":[{"bytes":6844,"path":"skills/vue-router-skilld/SKILL.md","sha256":"ac5843e252728fc599b047629140ee417b16af15065a1b4d1b9edecf461515e3","url":"https://skillfed.io/files/skilld-dev/vue-ecosystem-skills/vue-router-skilld/af96208c/SKILL.md"}],"id":"skilld-dev/vue-ecosystem-skills/vue-router-skilld","links":{"html":"https://skillfed.io/skilld-dev/vue-ecosystem-skills/vue-router-skilld","md":"https://skillfed.io/skilld-dev/vue-ecosystem-skills/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":"vue-router-skilld","publisher":"skilld-dev","stars":173},"relations":{"similar":[{"id":"skilld-dev/vue-ecosystem-skills/tanstack-vue-router-skilld"},{"id":"ejirocodes/agent-skills/vue-best-practices"},{"id":"skilld-dev/vue-ecosystem-skills/pinia-colada-skilld"},{"id":"skilld-dev/vue-ecosystem-skills/tresjs-core-skilld"},{"id":"skilld-dev/vue-ecosystem-skills/vueuse-integrations-skilld"},{"id":"skilld-dev/vue-ecosystem-skills/vue-skilld"},{"id":"skilld-dev/vue-ecosystem-skills/tanstack-vue-query-skilld"},{"id":"skilld-dev/vue-ecosystem-skills/vitepress-skilld"},{"id":"skilld-dev/vue-ecosystem-skills/vuetify-skilld"},{"id":"hairyf/skills/arch-nuxt-lite"}]},"slug":{"owner":"skilld-dev","repo":"vue-ecosystem-skills","skill":"vue-router-skilld"},"version":"af96208c"}