Vue Debug Guides

Skill Verified Active

Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.

Purpose

To help developers diagnose and fix runtime errors, warnings, async failures, and SSR/hydration issues in Vue 3 applications.

Features

Detailed debugging guidance for Vue 3.
Covers runtime errors, warnings, and async failures.
Addresses SSR and hydration issues.
Organized by Vue 3 feature areas (Reactivity, Components, Templates, etc.).
References external documentation for specific solutions.

Use Cases

Diagnosing unexpected re-renders and state updates.
Fixing issues with component lifecycle and props.
Troubleshooting template compilation errors.
Resolving SSR/hydration mismatches.

Non-Goals

Providing best practices for general Vue development (delegated to vue-best-practices).
Offering solutions for non-runtime Vue issues.
Replacing the need for a debugger or deep code analysis.

Versioning

info:Release ManagementThe skill frontmatter includes a name and description, but no explicit version number is present in the SKILL.md or manifests. Installation instructions reference 'main'.

Installation

First, add the marketplace

/plugin marketplace add hyf0/vue-skills

/plugin install vue-skills@vue-skills

Quality Score

Verified

98 /100

Analyzed about 21 hours ago

Trust Signals

Last commitabout 2 months ago

GitHub owner hyf0

Stars2.4k

LicenseMIT

Status

View Source

Similar Extensions

Layout Audit

100

Layout and spacing audit covering grid, spacing consistency, density, responsive behavior

Skill

Aboudjem

Vue Router Best Practices

100

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

Skill

hyf0

React Modernization

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

Skill

wshobson

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Skill

digitalsamba

Use My Browser

100

Use when work depends on the user's live browser session or visible rendered state rather than static fetches, especially for browser debugging contexts or DevTools-selected elements or requests, logged-in dashboards or CMS flows, localhost apps, forms, uploads, downloads, media inspection, DOM or iframe inspection, Shadow DOM, or browser failures that look like soft 404s, auth walls, anti-bot checks, or rate limits.

Skill

xixu-me

Node Connect

100

Diagnose OpenClaw Android, iOS, or macOS node pairing, QR/setup code, route, auth, and connection failures.

Skill

steipete