Skip to content
cccskills
FreePublished on GitHub

vue-router-best-practices

Helps troubleshoot Vue Router 4 navigation, including checks before changing pages, URL parameter changes, and component cleanup. Use it to investigate redirect loops, stale data, and asynchronous work during navigation.

OriginalShow the original description

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

Run score Not tested

See how to install

Good for

  • Investigating infinite redirect loops
  • Reviewing data updates when URL parameters change
  • Checking asynchronous API calls during navigation
  • Reviewing event listener cleanup when leaving a screen

Files included (9)

  • SKILL.md1.5 KB
  • reference/router-beforeenter-no-param-trigger.md4.8 KB
  • reference/router-beforerouteenter-no-this.md4.9 KB
  • reference/router-guard-async-await-pattern.md5.8 KB
  • reference/router-navigation-guard-infinite-loop.md5.4 KB
  • reference/router-navigation-guard-next-deprecated.md4.2 KB
  • reference/router-param-change-no-lifecycle.md4.9 KB
  • reference/router-simple-routing-cleanup.md5.2 KB
  • reference/router-use-vue-router-for-production.md5.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Navigation Guards

Route Lifecycle

Setup

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Create reusable Vue composables, functions that share reactive logic, accepting plain values, refs, or getters. Choose input types for reading or writing and normalize values so reactive effects track changes consistently.

  • Build reusable Vue composables
  • Update a document title when its input changes
  • Create a counter with writable input
vuejs-ai/skills3.1KUpdated Oct 20, 2026

Guides Vue 3 development with TypeScript, covering state, component responsibilities, and data flow. Helps organize implementation and refactoring, then review performance once the required behavior works.

  • Building Vue 3 screens with TypeScript
  • Refactoring large components
  • Clarifying state ownership and data flow
vuejs-ai/skills3.1KUpdated Oct 20, 2026

vue-debug-guides

FreeSummary

Diagnose Vue 3 problems through symptom-based references covering state updates, component events, asynchronous failures, and rendering errors. Includes server-rendered pages whose HTML does not match what the browser expects when it takes over.

  • Investigating a screen that no longer updates
  • Tracking duplicate or missing component events
  • Diagnosing asynchronous loading failures
vuejs-ai/skills3.1KUpdated Oct 20, 2026

Write JSX, an HTML-like syntax within JavaScript, for Vue by checking how it differs from React JSX. Covers attribute conventions and JSX plugin configuration, with guidance for code migration and attribute type errors.

  • Migrating React JSX code to Vue
  • Investigating JSX attribute type errors
  • Checking class and className usage
vuejs-ai/skills3.1KUpdated Oct 20, 2026

Guides maintenance of Vue 3 components written with Options API. Covers TypeScript typing, access to component data through this, lifecycle methods, and accidental sharing of state between component instances.

  • Adding types to Options API components
  • Investigating this binding in methods
  • Reviewing access to data in lifecycle hooks
vuejs-ai/skills3.1KUpdated Oct 20, 2026

Set up Pinia stores, the shared data containers used in Vue applications, and troubleshoot state updates. Covers startup errors, destructuring that breaks screen updates, method context, and using URLs for temporary filters.

  • Investigating Pinia startup errors
  • Fixing screen updates after destructuring store values
  • Checking state returned by setup stores
vuejs-ai/skills3.1KUpdated Oct 20, 2026

See all skills by vuejs-ai

Report a problem with this skill