vue-router-skilld
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.
Vue Router Skilld provides v5 API changes, v4 migration guidance, and routing best practices for Vue applications.
AI-generated summary based on this skill's SKILL.md
Install
skilld-dev/vue-ecosystem-skills/vue-router-skilld · repository language: MDX
git clone https://github.com/skilld-dev/vue-ecosystem-skills
cp -r vue-ecosystem-skills/skills/vue-router-skilld ~/.claude/skills/vue-router-skilldFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the main vue-router v5.0.6 API changes from v4?
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.
How do I import the vue-router Vite plugin?
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.
How do I set up data loaders with vue-router?
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.
How do I configure typed routes and route meta in TypeScript?
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.
What are navigation guard best practices and how do I debug routing issues?
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.
How does vue-router handle file-based routing and auto-routes?
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.
SKILL.md
rendered from the published skill — quoted content, verbatim
vuejs/router vue-router@5.0.6
Tags: next: 4.0.13, legacy: 3.6.5, edge: 4.4.0-alpha.3
References: Docs
API Changes
This section documents version-specific API changes — prioritize recent major/minor releases.
-
NEW:
vue-router/vite— v5 ships the Vite plugin (formerlyunplugin-vue-router/vite) directly in the core package; import fromvue-router/viteinstead source -
NEW:
vue-router/auto-routes— v5 export that provides the auto-generated file-based route list; previously requiredunplugin-vue-routeras a separate package source -
NEW:
vue-router/unplugin— v5 export for Webpack/Rollup/esbuild plugins and utilities (VueRouterAutoImports,EditableTreeNode,createRoutesContext, etc.); previously imported from
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/vue-router-skilld/SKILL.md
skills/vue-router-skilld/references/discussions/_INDEX.md
skills/vue-router-skilld/references/discussions/discussion-2435.md
skills/vue-router-skilld/references/discussions/discussion-2436.md
skills/vue-router-skilld/references/discussions/discussion-2442.md
skills/vue-router-skilld/references/discussions/discussion-2447.md
skills/vue-router-skilld/references/discussions/discussion-2455.md
skills/vue-router-skilld/references/discussions/discussion-2469.md
skills/vue-router-skilld/references/discussions/discussion-2472.md
skills/vue-router-skilld/references/discussions/discussion-2473.md
skills/vue-router-skilld/references/discussions/discussion-2483.md
skills/vue-router-skilld/references/discussions/discussion-2495.md
skills/vue-router-skilld/references/discussions/discussion-2501.md
skills/vue-router-skilld/references/discussions/discussion-2531.md
skills/vue-router-skilld/references/discussions/discussion-2538.md