vue-router-best-practices

Name: vue-router-best-practices
Author: vuejs-ai

github.com/vuejs-aiDevelopment3.2k15.3k installsUpdated 5d ago

About vue-router-best-practices

A Vue Router practice skill for developers building Vue applications. It organizes guidance around navigation guards, route lifecycle behavior, and production setup, with pointers to common pitfalls.

Key features

01Navigation guard patterns
02Route parameter and lifecycle guidance
03Cleanup of persistent event listeners
04Production SPA routing guidance

Use cases

01Debugging redirects or guard issues
02Handling navigation between route parameters
03Removing listeners after component unmount
04Setting up Vue Router for an SPA

Install

Copy the command and run it in a terminal.

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

After installing, type/vue-router-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

reference/

router-beforeenter-no-param-trigger.md

router-beforerouteenter-no-this.md

router-guard-async-await-pattern.md

router-navigation-guard-infinite-loop.md

router-navigation-guard-next-deprecated.md

router-param-change-no-lifecycle.md

router-simple-routing-cleanup.md

router-use-vue-router-for-production.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: vuejs-ai
Repository: vuejs-ai/skills
Category: Development
Installs: 15,300
GitHub stars: 3,199

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.