🎯

vue-router-best-practices

🎯Skill

from hyf0/vue-skills

What it does

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

Overview

The Vue Router Best Practices skill provides AI agents with specialized knowledge of Vue Router 4 for Vue 3 applications. Part of the vue-skills collection derived from real-world issues, it covers navigation guards, route parameters, route-component lifecycle management, and common pitfalls when working with Vue Router.

Key Features

Navigation Guards - Best practices for implementing beforeEach, beforeEnter, and in-component navigation guards
Route Parameter Handling - Guidance on working with route params, managing reactivity, and handling dynamic route segments
Route-Component Lifecycle - Instructions on understanding the interaction between Vue Router navigation and Vue component lifecycle hooks
Skill Trigger System - Activates when working with Vue Router 4; prefix prompts with "use vue skill" for reliable activation
Cross-Agent Compatibility - Installable via skills CLI or Claude Code Marketplace, works with Claude Code, Cursor, and other supported agents

Who is this for?

This skill is for Vue 3 developers using Vue Router 4 who want AI-assisted guidance on routing best practices. It is particularly helpful for developers building single-page applications with complex navigation requirements who need to avoid common Vue Router pitfalls and implement proper navigation patterns.

📦

Same repository

hyf0/vue-skills(11 items)

vue-router-best-practices

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add hyf0/vue-skills --skill vue-router-best-practices

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add hyf0/vue-skills --skill vue-router-best-practices

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/vue-router-best-practices/SKILL.md

SKILL.md

1,030Installs

1,301

Last UpdatedJan 29, 2026

View on GitHub Back to Skills

More from this repository10

🎯

vue-best-practices🎯Skill

A Vue 3 skill for AI agents providing Composition API and TypeScript best practices, common gotcha prevention, SSR guidance, and performance patterns for Claude Code and Cursor.

🎯

vue-debug-guides🎯Skill

Diagnoses and resolves Vue 3 runtime errors, async failures, hydration issues, and common component debugging challenges.

🎯

vue-pinia-best-practices🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

🎯

create-adaptable-composable🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

🎯

vue-options-api-best-practices🎯Skill

Vue 3 Options API best practices covering TypeScript integration, method binding, lifecycle hooks, computed properties, and common gotchas like arrow function pitfalls and stateful method lifecycle management.

🎯

vue-testing-best-practices🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

🎯

vue-jsx-best-practices🎯Skill

Agent skills for Vue 3 development, derived from real-world issues and providing specialized patterns for AI agents to enhance Vue development workflows.

🎯

vue-development-guides🎯Skill

Provides comprehensive Vue.js development guidelines and best practices for creating, refactoring, and reviewing Vue and Nuxt projects with a focus on code quality

🎯

pinia-best-practices🎯Skill

Provides Pinia state management best practices for Vue.js applications including store patterns, code organization, and performance optimization

🎯

vueuse-best-practices🎯Skill

Provides VueUse composable best practices for efficiently leveraging utility functions and reactive patterns in Vue.js applications