playbooks

home / skills / partme-ai / full-stack-skills / vue-router-v3

vue-router-v3 skill

/skills/vue-router-v3

This skill helps you configure Vue Router v3 in Vue 2 apps, implement routing patterns, and access API details from official docs.

npx playbooks add skill partme-ai/full-stack-skills --skill vue-router-v3

Review the files below or copy the command above to add this skill to your agents.

Files (27)
SKILL.md
3.6 KB
---
name: vue-router-v3
description: Guidance for Vue Router v3 using the official Installation, Guide, and API docs. Use when users need routing setup, navigation patterns, or API details for Vue 2 projects.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- Install and configure Vue Router v3
- Implement routing patterns for Vue 2 applications
- Use navigation guards, history mode, or lazy-loading routes
- Reference Vue Router v3 API details

## How to use this skill

1. **Identify the topic** from the user request.
2. **Open the matching guide example** file in `examples/`.
3. **For API details**, open the matching file in `api/`.
4. **Follow official guidance** and keep outputs consistent with v3 docs.

### Installation mapping
- `examples/installation.md` → https://v3.router.vuejs.org/installation.html

### Guide mapping (one-to-one with https://v3.router.vuejs.org/guide/)

**Essentials**
- `examples/guide/index.md` → https://v3.router.vuejs.org/guide/
- `examples/guide/essentials/dynamic-matching.md` → https://v3.router.vuejs.org/guide/essentials/dynamic-matching.html
- `examples/guide/essentials/nested-routes.md` → https://v3.router.vuejs.org/guide/essentials/nested-routes.html
- `examples/guide/essentials/navigation.md` → https://v3.router.vuejs.org/guide/essentials/navigation.html
- `examples/guide/essentials/named-routes.md` → https://v3.router.vuejs.org/guide/essentials/named-routes.html
- `examples/guide/essentials/named-views.md` → https://v3.router.vuejs.org/guide/essentials/named-views.html
- `examples/guide/essentials/redirect-and-alias.md` → https://v3.router.vuejs.org/guide/essentials/redirect-and-alias.html
- `examples/guide/essentials/passing-props.md` → https://v3.router.vuejs.org/guide/essentials/passing-props.html
- `examples/guide/essentials/history-mode.md` → https://v3.router.vuejs.org/guide/essentials/history-mode.html

**Advanced**
- `examples/guide/advanced/navigation-guards.md` → https://v3.router.vuejs.org/guide/advanced/navigation-guards.html
- `examples/guide/advanced/meta.md` → https://v3.router.vuejs.org/guide/advanced/meta.html
- `examples/guide/advanced/transitions.md` → https://v3.router.vuejs.org/guide/advanced/transitions.html
- `examples/guide/advanced/data-fetching.md` → https://v3.router.vuejs.org/guide/advanced/data-fetching.html
- `examples/guide/advanced/scroll-behavior.md` → https://v3.router.vuejs.org/guide/advanced/scroll-behavior.html
- `examples/guide/advanced/lazy-loading.md` → https://v3.router.vuejs.org/guide/advanced/lazy-loading.html
- `examples/guide/advanced/navigation-failures.md` → https://v3.router.vuejs.org/guide/advanced/navigation-failures.html

### API mapping (one-to-one with https://v3.router.vuejs.org/api/)
- `api/router-link.md` → https://v3.router.vuejs.org/api/#router-link
- `api/router-view.md` → https://v3.router.vuejs.org/api/#router-view
- `api/router-instance.md` → https://v3.router.vuejs.org/api/#router-instance
- `api/router-options.md` → https://v3.router.vuejs.org/api/#router-options
- `api/route-object.md` → https://v3.router.vuejs.org/api/#the-route-object
- `api/route-config.md` → https://v3.router.vuejs.org/api/#routes
- `api/navigation-guards.md` → https://v3.router.vuejs.org/api/#navigation-guards

## Resources
- Installation: https://v3.router.vuejs.org/installation.html
- Guide: https://v3.router.vuejs.org/guide/
- API: https://v3.router.vuejs.org/api/

## Keywords
vue-router v3, vue 2 router, routing, navigation guards, history mode, router-link, router-view, route config, route object

Overview

This skill provides practical guidance for using Vue Router v3 in Vue 2 projects. It centralizes installation steps, routing patterns, navigation guard usage, and API references mapped to the official v3 docs. Use it to get consistent, actionable answers for router setup and common routing scenarios.

How this skill works

The skill inspects the user's request to determine whether they need installation steps, guide-level patterns, or API details. It maps requests to curated example files for guides and to specific API pages for component and router options. Responses follow the official Vue Router v3 documentation to ensure compatibility with Vue 2 projects.

When to use it

  • Setting up Vue Router v3 in a new or existing Vue 2 project
  • Designing route configurations: nested routes, named views, redirects, and props
  • Implementing navigation guards, history mode, or scroll behavior
  • Configuring lazy-loaded routes and route-based code splitting
  • Looking up RouterLink, RouterView, Router instance, or Route object APIs

Best practices

  • Prefer history mode for user-friendly URLs but configure server fallback for SPA routing
  • Use nested routes and named views to keep components modular and layouts consistent
  • Define route-level lazy loading for large apps to reduce initial bundle size
  • Implement global and per-route navigation guards to protect routes and manage async data
  • Keep route meta usage minimal and descriptive for permissions and titles

Example use cases

  • Walkthrough for installing and registering Vue Router v3 in a Vue 2 app
  • Example route configs showing nested routes, dynamic segments, and named views
  • Patterns for protecting routes with beforeEach and per-route beforeEnter guards
  • Using router.push, router.replace, and <router-link> programmatically and declaratively
  • Configuring scrollBehavior and route-based lazy loading for performance

FAQ

Is Vue Router v3 compatible with Vue 3?

No. Vue Router v3 is designed for Vue 2. For Vue 3 projects use Vue Router v4.

How do I enable history mode without breaking direct URL access?

Enable history mode in router options and configure your server to fallback to index.html for unknown routes so the SPA can handle routing.