vue-router-best-practices Skill for Claude Code: Vue Router 4 Gotchas and Guards

vue-router-best-practices helps Claude avoid common Vue Router 4 mistakes with navigation guards, route params and route cleanup.

Installs: 15.6K; on skills.sh
Stars: 3.2K; on GitHub
Files: 8; besides SKILL.md
Updated: Oct 2026; last repo commit

vue-router-best-practices is a short index skill from the vuejs-ai community repo. Its SKILL.md lists eight Vue Router gotchas, and each one links to a reference file that Claude opens when the problem comes up. Topics include guards that call APIs without awaiting, infinite redirect loops, the deprecated next() function and stale data when only route params change.

It loads when you work with Vue Router 4 patterns, guards, route params or route-component lifecycle. The repo README says it is an early experiment, may be incomplete, and works best when you start the prompt with "use vue skill".

It bundles no scripts and names no tools or keys.

Good for

Vue 3 developers writing navigation guards and route configs
Developers debugging stale data, hung navigation or redirect loops
Teams that protect routes with auth checks in guards

Install vue-router-best-practices

Claude Code

Copy this prompt.

Install the vue-router-best-practices skill in Claude Code. Run this command:

/plugin marketplace add vuejs-ai/skills
/plugin install vue-router-best-practices@vue-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The README's marketplace route can install this skill on its own as a plugin, or all 8 Vue skills with vue-skills-bundle@vue-skills. The skills CLI line with --skill also installs only this one; the README's plain npx skills add vuejs-ai/skills installs all 8. Pick one route. vue-router-best-practices does not call the other Vue skills.

From the project README. Source.

What's in the skill

When it loads

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

Sections in SKILL.md

Navigation Guards
Route Lifecycle
Setup

Key facts

License: MIT
Author: vuejs-ai (repo owner)
Repository: vuejs-ai/skills, folder skills/vue-router-best-practices
Installs on skills.sh: 15,623 as of 2026-11-02
Repo stars: 3,229 as of 2026-11-02 (whole repo)
Last repo commit: 2026-10-23
Files in the skill folder: 9 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass

What it includes

Navigating between the same route with different params
Route-level beforeEnter guards fire only when you enter from a different route, so changes to params, query or hash within the same route skip them.
beforeEnter ignores param changes
Accessing the component instance
The guard runs before the component exists, so this is undefined. Use the next callback to reach the instance.
beforeRouteEnter has no this
Guards that call APIs
Unawaited promises let navigation finish before async checks complete, which can allow unauthorized access or missing data.
Async guards need proper awaiting
Users trapped in redirects
Rated HIGH impact: misconfigured guards can trap users in loops that crash the browser or make the app unusable.
Infinite redirect loops
Guards that still use next()
Rated HIGH impact: using next() incorrectly can hang navigation, loop or fail silently.
next() is deprecated
Stale data on the same route
Rated HIGH impact: the component instance is reused, so created and mounted do not run again and data goes stale.
Param changes skip lifecycle hooks
Basic routing without Vue Router
A hashchange listener you forget to remove causes memory leaks and handlers that run more than once.
Hash routing needs listener cleanup
Simple hash routing is not enough
Rated LOW impact: production single-page apps should use the library for guards, lazy loading and history management.
Use Vue Router for production

From the official docs

Questions

What does the vue-router-best-practices skill do?

It gives Claude eight Vue Router 4 gotchas, each with a reference file. Claude uses them to avoid mistakes like unawaited guards, redirect loops and stale data on param changes.

How do I install it?

Use the install box above and pick one route. The Claude Code plugin and the skills CLI --skill command install only this skill. The README also shows npx skills add vuejs-ai/skills for all 8 Vue skills and vue-skills-bundle@vue-skills for the same set as a plugin.

How do I make sure it triggers?

The README says to start the prompt with "use vue skill". Without that prefix, triggering may be inconsistent, depending on how closely your prompt matches the skill description.

Does it need an API key?

No. The SKILL.md names no key, and the folder holds the SKILL.md plus eight reference files, with no scripts.

Is it safe?

It bundles no scripts: the folder is SKILL.md plus eight reference files. The repo README calls the project an early experiment that may be incomplete or contain mistakes, so check Claude's router code against the Vue Router docs.

Do I need the other Vue skills?

No. The README lists vue-best-practices, vue-pinia-best-practices and others in the same repo. They are optional and the SKILL.md does not require them.

Information

updated Nov 2, 2026

Repository: vuejs-ai/skills
Folder: skills/vue-router-best-practices

vuejs-ai/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 11

vuejs-ai-vue-router-best-practices SKILL.md · github.com
vuejs-ai/skills README · github.com
skills CLI commands · github.com
router-navigation-guard-infinite-loop.md · github.com
router-param-change-no-lifecycle.md · github.com
router-beforeenter-no-param-trigger.md · github.com
router-beforerouteenter-no-this.md · github.com
router-guard-async-await-pattern.md · github.com
router-navigation-guard-next-deprecated.md · github.com
router-simple-routing-cleanup.md · github.com
router-use-vue-router-for-production.md · github.com