SkillsAdd

antfu/skills

vue-router-best-practices

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

All-time #1268 First seen Jan 31, 2026
8-week activity · all time api

Installation

$ npx skills add antfu/skills --skill vue-router-best-practices
View on skills.sh ↗ GitHub repository ↗
Feature your product here Skill page unit · reach builders installing agent skills View pricing →

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

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vue-router-best-practices Linked neighbor
vuejs-ai/skills

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interacti…

49 installs
vercel-react-best-practices Similar name
vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill shoul…

3.7K installs
remotion-best-practices Similar name
remotion-dev/skills

Router for all Remotion skills

5.7K installs
supabase-postgres-best-practices Similar name
supabase/agent-skills

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill …

1.4K installs
better-auth-best-practices Similar name
better-auth/skills

Configure Better Auth server and client, set up database adapters, manage sessions, add plugins…

330 installs
workers-best-practices Similar name
cloudflare/skills

Cloudflare Workers best practices for production applications. Use when writing, reviewing, or …

1.2K installs

Also in this package

Other skills from antfu/skills · top by installs.

npx skills add antfu/skills
vitest 152 vite 72 vue 54 nuxt 33 vue-best-practices 23.4K pnpm 47 vueuse-functions 21.4K pinia 50 web-design-guidelines 19.3K vue-testing-best-practices 17.2K

Browse all from antfu/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 5.9K
License LICENSE.md
Default branch main
Open issues 9
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0
LicenseMIT

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,492 B
  • docs SUMMARY.md 129 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 18,422 installs

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](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)