How do I install vue-router-best-practices?

Run `npx skills add https://github.com/antfu/skills --skill vue-router-best-practices` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does vue-router-best-practices support?

vue-router-best-practices works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is vue-router-best-practices free to use?

Yes. vue-router-best-practices is free to install and use. It is available from the open explainx.ai skill registry published by antfu.

Where can I read ratings and reviews for vue-router-best-practices?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

Frontend

vue-router-best-practices▌

antfu/skills · updated Apr 8, 2026

$npx skills add https://github.com/antfu/skills --skill vue-router-best-practices

summary

Vue Router 4 patterns, navigation guards, and route-lifecycle best practices.

›Covers five navigation guard patterns including async/await handling, deprecated next() function migration, infinite redirect loops, and param-change detection
›Addresses route-lifecycle gotchas like stale data when navigating between same routes and event listener cleanup on component unmount
›Includes production SPA setup guidance and component instance access patterns in beforeRouteEnter guards

skill.md

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

general reviews

Ratings

4.5★★★★★54 reviews

★★★★★Kabir Ramirez· Dec 28, 2024
vue-router-best-practices fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
★★★★★Kwame Taylor· Dec 16, 2024
Solid pick for teams standardizing on skills: vue-router-best-practices is focused, and the summary matches what you get after install.
★★★★★Layla Diallo· Dec 16, 2024
vue-router-best-practices is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
★★★★★Chaitanya Patil· Dec 4, 2024
vue-router-best-practices reduced setup friction for our internal harness; good balance of opinion and flexibility.
★★★★★Piyush G· Nov 23, 2024
I recommend vue-router-best-practices for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
★★★★★Kwame Khan· Nov 19, 2024
vue-router-best-practices has been reliable in day-to-day use. Documentation quality is above average for community skills.
★★★★★Olivia Chen· Nov 7, 2024
vue-router-best-practices fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
★★★★★Kwame Haddad· Nov 7, 2024
We added vue-router-best-practices from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
★★★★★Rahul Santra· Nov 3, 2024
vue-router-best-practices is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
★★★★★Olivia Park· Oct 26, 2024
We added vue-router-best-practices from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

showing 1-10 of 54

1 / 6