Vue Router

What it does

This skill enables AI agents to configure and manage routing within Vue.js applications using the vue-router library. It supports both Vue 2 (using Vue Router 3.x) and Vue 3 (using Vue Router 4.x), allowing for dynamic routes, nested navigation structures, and programmatic control over page transitions. The skill facilitates efficient frontend development by handling routing logic directly within the agent's workflow.

When to use it

• Configuring routing in new or existing Vue.js projects.
• Implementing complex navigation patterns like dynamic routes (e.g., user profiles) and nested routes (e.g., admin dashboards).
• Setting up navigation guards for authentication, authorization, and other pre/post-route actions.
• Performing programmatic navigation using router.push, router.replace, or going back in history.
• Lazy-loading components to improve initial page load performance.

Key capabilities

• Supports Vue 2 (Vue Router 3.x) and Vue 3 (Vue Router 4.x).
• Configuration of dynamic, nested, and named routes.
• Implementation of navigation guards (beforeEach, afterEach).
• Programmatic navigation using router.push and router.replace.
• Lazy-loading route components for code splitting.
• Use of route meta fields for permissions and layout control.

Example prompts

• "Set up a route in my Vue 3 application that takes me to the user detail page based on their ID."
• "Create a navigation guard in my Vue 2 app that redirects unauthenticated users to the login page."
• "Implement lazy loading for the 'AdminDashboard' component in my Vue 3 project."

Tips & gotchas

• Ensure you specify whether your project is using Vue 2 or Vue 3, as the API differs between versions.
• Centralize navigation guard logic to maintain consistency and avoid code duplication.
• When using createWebHistory mode (for clean URLs), configure a server-side fallback for HTML5 history mode.