Skip to main content

Vue Router Best Practices

Skill Verified Active

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

Purpose

To help developers implement Vue Router 4 effectively by providing best practices, common patterns, and solutions for frequently encountered issues.

Features

  • Vue Router 4 navigation guard patterns
  • Solutions for route-component lifecycle issues
  • Guidance on handling route params and navigation
  • Addresses common pitfalls like infinite redirect loops

Use Cases

  • When implementing navigation guards in Vue Router 4
  • When dealing with route param changes affecting component lifecycle
  • When encountering or preventing infinite redirect loops in routing
  • When ensuring proper cleanup of event listeners in route components

Non-Goals

  • General Vue.js component development
  • State management solutions other than routing state
  • Client-side routing for frameworks other than Vue

Installation

First, add the marketplace

/plugin marketplace add hyf0/vue-skills
/plugin install vue-skills@vue-skills

Quality Score

Verified
100 /100
Analyzed about 15 hours ago

Trust Signals

Last commitabout 2 months ago
Stars2.4k
LicenseMIT
Status
View Source

Similar Extensions

Deepinit

100

Deep codebase initialization with hierarchical AGENTS.md documentation

Skill
Yeachan-Heo

Cleanup Cycles

100

Detect and untangle circular dependencies. Runs madge/skott (TS), pycycle (Py), or compiler-only checks (Go/Rust). Auto-fixes leaf-extractable cycles; reports core cycles for human review. Use when the user asks to find circular imports, fix dependency cycles, or untangle module graph. Example queries — "find circular imports", "fix dependency cycles", "untangle our module graph", "why is madge complaining".

Skill
raintree-technology

Netlify Identity

100

Use when the task involves authentication, user signups, logins, password recovery, OAuth providers, role-based access control, or protecting routes and functions. Always use `@netlify/identity`. Never use `netlify-identity-widget` or `gotrue-js` — they are deprecated.

Skill
netlify

Develop Web Game

100

Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.

Skill
davila7

Sentry React Router Framework Sdk

100

Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.

Skill
getsentry

Create Adaptable Composable

100

Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.

Skill
hyf0

© 2025 SkillRepo · Find the right skill, skip the noise.