Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

vue-router-best-practices — Claude Code skill: routing and lifecycle

Skill teaches AI coders Vue Router 4 patterns: navigation guards, route params handling, and component lifecycle synchronization. Prevents infinite redirects, memory leaks, and data desync.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add vuejs-ai/skills --skill vue-router-best-practices -a claude-code
Open on GitHub

What vue-router-best-practices does

The skill covers navigation guard patterns (beforeRouteEnter, beforeRouteLeave), proper async/await usage in guards, and transitions between routes with different params. It addresses common mistakes: forgotten await in guards, use of deprecated next() function, event listeners persisting after component unmount.

Once installed, the skill provides Claude Code, Cursor, or another supported editor with recommendations on Vue Router 4 in production, patterns that trigger infinite redirect loops, and ways to sync component data when route params change.

What it helps with

  • Prevent infinite redirect loops in navigation guards
  • Sync component data when route params change
  • Clean up event listeners before component unmount
  • Use async/await correctly in beforeRouteEnter and other guards
  • Migrate from deprecated next() to modern Vue Router 4 syntax

Example prompts for the agent

  • Write a navigation guard that loads data before entering a route and handles network errors
  • Show how to update a component when route params change but the route itself stays the same
  • Help set up cleanup for event listeners when moving to a different route

How to install vue-router-best-practices

1Skills CLI (Vercel)

npx skills add vuejs-ai/skills --skill vue-router-best-practices -a claude-code

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/vue-router-best-practices/

From the same set7

The whole set →
vue-best-practices github.com/vuejs-ai Enforces Vue 3 guidelines using Composition API and TypeScript. Helpful for structuring SFCs, managing reactivity, and writing composables. Claude Code CX Codex Cursor +1 42,700installs vue-debug-guides github.com/vuejs-ai Skill for diagnosing Vue 3 errors: reactivity, watchers, components, templates, and hydration. When the agent sees a Vue bug, it looks up the cause in a catalog of common issues. Claude Code CX Codex Cursor +1 26,700installs vue-pinia-best-practices github.com/vuejs-ai A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects. Claude Code CX Codex Cursor +1 16,800installs create-adaptable-composable github.com/vuejs-ai Skill for writing reusable Vue composables that accept values, refs, or getters and work the same way in all cases. Use it when you need a library-grade composable that adapts to different input types. Claude Code CX Codex Cursor +1 13,700installs vue-testing-best-practices github.com/vuejs-ai Skill offering Vue 3 testing patterns and best practices. It helps configure Vitest and write blackbox component tests without brittle assertions. Claude Code CX Codex Cursor +1 13,600installs vue-options-api-best-practices github.com/vuejs-ai Guidance for Vue 3 Options API components, covering TypeScript, method context, and lifecycle hook pitfalls. Useful when reviewing or writing Options API code. Claude Code CX Codex Cursor +1 11,600installs

Similar

digits-fintech-swiss-template nexu-io A fintech deck template on a Swiss grid: black, warm paper, neon-lime accents. Three slides with bold numeric cards and keyboard navigation, all in one HTML file. Claude Code CX Codex Cursor +1 2,700installs full-page-screenshot nexu-io This skill captures full-page screenshots of web pages using Chrome DevTools Protocol with no external dependencies. Handy for portfolios, case studies, and audit reports. Claude Code CX Codex Cursor +1 2,700installs artifacts-builder nexu-io A skill designed for generating multi-component claude.ai HTML artifacts. It uses React and Tailwind CSS alongside shadcn/ui components. Claude Code CX Codex Cursor +1 2,700installs gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs design-motion-principles kylezantos Builds or audits UI motion with rules based on project context and interaction frequency. Use it for transitions, hover states, and micro-interactions. Claude Code CX Codex Cursor +1 12,600installs argent-lens software-mansion Visual variant staging for UI elements in a native preview window. Stages design options on a simulator so you can pick the winner. Claude Code CX Codex Cursor +1 22,400installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about vue-router-best-practices

How do I install vue-router-best-practices in Claude Code?

Run npx skills add vuejs-ai/skills --skill vue-router-best-practices -a claude-code, then open ~/.claude/skills/vue-router-best-practices/SKILL.md. Other editors use different commands (see Cursor, Codex, or GitHub Copilot in the list).

What does this skill do?

It teaches AI coders Vue Router 4 rules: how to write navigation guards, work with route params, sync component state, and avoid memory leaks.

Does the skill work with all editors?

Yes, it supports Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI, and OpenCode. Each editor requires its own install command.

Source text

SKILL.md · MIT 
---
name: vue-router-best-practices
description: "Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions."
version: 1.0.0
license: MIT
author: github.com/vuejs-ai
---

Vue Router best practices, common gotchas, and navigation patterns.

### Navigation Guards
- Navigating between same route with different params → See [router-beforeenter-no-param-trigger](reference/router-beforeenter-no-param-trigger.md)
- Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference/router-beforerouteenter-no-this.md)
- Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference/router-guard-async-await-pattern.md)
- Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference/router-navigation-guard-infinite-loop.md)
- Navigation guard using deprecated next() function → See [router-navigation-guard-next-deprecated](reference/router-navigation-guard-next-deprecated.md)

### Route Lifecycle
- Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference/router-param-change-no-lifecycle.md)
- Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference/router-simple-routing-cleanup.md)

### Setup
- Building production single-page application → See [router-use-vue-router-for-production](reference/router-use-vue-router-for-production.md)

© github.com/vuejs-ai · MIT · vuejs-ai/skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor