mcpbeat

Vue Router Best Practices

antfu/vue-router-best-practices

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

This is a copy. The original lives at christophacham/vue-router-best-practices.

11k tokens
context cost
the whole folder, loaded on every use
11
files
instructions only
0
copies elsewhere
how many repositories repackaged it
5703
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/antfu/skills --skill vue-router-best-practices

The instruction itself

3 sections, as written by the author

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

Navigation Guards

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

Route Lifecycle

  • Stale data when navigating between same route → See router-param-change-no-lifecycle
  • Event listeners persisting after component unmounts → See router-simple-routing-cleanup

Setup

  • Building production single-page application → See router-use-vue-router-for-production

How to use it

Copy the folder

Take antfu/vue-router-best-practices from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.