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
Decision gist · record as of 2026-05-05
Vue Router Skilld provides v5 API changes, v4 migration guidance, and routing best practices for Vue applications. 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.
Use it when
- Vue-router-skilld explains that the Vite plugin is imported from `vue-router/vite`.
- Vue-router-skilld covers data loaders as an experimental feature in v5 that integrates with navigation lifecycle control.
Verify before relying
Read SKILL.md below before installing (60 files). Open directory: indexed for reading, not audited.
Similar skills
Install
skilld-dev/vue-ecosystem-skills/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 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)
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
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 › “Understand vue-router v5 API changes and migration path from v4”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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.
This skill guides agents through upgrading HeroUI v2 applications to v3, addressing breaking changes like compound components, removed Provider requirements, and event handler renaming. It provides migration workflows for both full and incremental approaches, component-specific guides, and styling updates to keep projects functional during the transition.
This skill analyzes your project's tech stack and workflow to recommend the best-matching skills, then installs them to a project-relative path only after you confirm. It detects languages, frameworks, build tools, and testing setups to surface relevant skill options, while delegating skill creation to specialized writers.
i18n-expert guides you through complete internationalization setup and auditing for React, Next.js, and Vue codebases. It handles framework selection, locale file organization, string replacement with translation keys, and validation of locale parity across your target languages. The skill ensures proper error localization, metadata translation, and language switching with persistence.
Clerk Vue Patterns teaches you how to build authenticated Vue 3 apps using Clerk's composables—useAuth, useUser, useClerk, and useOrganization—plus Vue Router guards and Pinia store setup. Covers common pitfalls and org switching workflows.
Localization guides you through expanding your app's reach across international markets by prioritizing high-potential regions and adapting your store presence for each audience. It covers market selection based on size, competition, and revenue potential, plus a detailed checklist for translating and culturally customizing your title, keywords, description, and visual assets. The skill emphasizes that effective localization means researching how locals actually search—not simply translating English keywords—and provides a phased workflow from market research through launch and performance monitoring.