vue-router

Name: vue-router
Author: hairyf

github.com/hairyfDevelopment26108 installsUpdated 2w ago

About vue-router

A Vue Router skill for developers building Vue.js single-page applications. It covers route setup, navigation, and advanced routing patterns, including typed routes and navigation guards.

Key features

01Nested and dynamic routes
02Route params, queries, and named routes
03Navigation methods and guards
04History modes and scroll behavior
05Typed routes and lazy loading

Use cases

01Configure routing in a Vue.js SPA
02Add guarded or runtime-defined routes
03Document route transitions and scroll behavior

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hairyf/skills --skill vue-router

After installing, type/vue-routerin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

GENERATION.md

references/

advanced-composition-api.md

advanced-dynamic-routing.md

advanced-lazy-loading.md

advanced-meta.md

advanced-navigation-failures.md

advanced-navigation-guards.md

advanced-router-view-slot.md

advanced-scroll-behavior.md

advanced-transitions.md

advanced-typed-routes.md

core-navigation.md

core-router-setup.md

core-router-view-link.md

essentials-active-links.md

essentials-dynamic-matching.md

essentials-history-mode.md

essentials-named-routes.md

essentials-named-views.md

essentials-nested-routes.md

essentials-passing-props.md

essentials-redirect-alias.md

essentials-route-matching-syntax.md

Details

From the project README

Vue Router

The skill is based on Vue Router v5.0.1, generated at 2026-01-31.

Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. Features include nested routes mapping, dynamic routing, modular component-based router configuration, route params, query, wildcards, view transition effects, fine-grained navigation control, links with automatic active CSS classes, HTML5 history mode or hash mode, customizable scroll behavior, and proper encoding for URLs.

Core References

Topic	Description	Reference
Router Setup	Create router instance, register plugin, access router/route	core-router-setup
Navigation	Programmatic navigation with push, replace, go methods	core-navigation
RouterView & RouterLink	Components for rendering routes and creating navigation links	core-router-view-link

Essentials

Route Configuration

Topic	Description	Reference
Dynamic Matching	Dynamic route segments with params, accessing route.params	essentials-dynamic-matching
Nested Routes	Nested route configuration with children option	essentials-nested-routes
Named Routes	Named routes for navigation without hardcoded URLs	essentials-named-routes
Named Views	Multiple RouterView components for complex layouts	essentials-named-views
History Mode	HTML5 history, hash mode, memory mode, server configuration	essentials-history-mode
Route Matching Syntax	Custom regex, repeatable params, optional params	essentials-route-matching-syntax
Active Links	Active link CSS classes, router-link-active vs exact-active	essentials-active-links
Passing Props	Pass route params as component props	essentials-passing-props
Redirect & Alias	Route redirects and aliases for URL mapping	essentials-redirect-alias

Advanced

Navigation & Guards

Topic	Description	Reference
Navigation Guards	Global guards, per-route guards, in-component guards	advanced-navigation-guards
Navigation Failures	Detecting aborted/cancelled/duplicated navigations	advanced-navigation-failures

Composition & TypeScript

Topic	Description	Reference
Composition API	useRouter, useRoute, navigation guards, useLink	advanced-composition-api
Typed Routes	TypeScript typed routes for autocomplete and type safety	advanced-typed-routes

Advanced Features

Topic	Description	Reference
Transitions	Route transitions using RouterView slot	advanced-transitions
Scroll Behavior	Custom scroll behavior on navigation	advanced-scroll-behavior
Meta Fields	Route meta fields for custom data	advanced-meta
Lazy Loading	Lazy loading route components with dynamic imports	advanced-lazy-loading
Dynamic Routing	Adding and removing routes at runtime	advanced-dynamic-routing
RouterView Slot	Advanced RouterView slot API for custom rendering	advanced-router-view-slot

Comments

Markdown supported

Details

Author: hairyf
Repository: hairyf/skills
Category: Development
Installs: 108
GitHub stars: 26

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.