hyf0 avatar

Vue Debug Guides

hyf0/vue-skills
1.9k

This skill provides comprehensive guidance for debugging Vue 3 applications, covering runtime errors, reactivity issues, computed properties, watchers, component interactions, and template pitfalls. It helps developers identify and resolve common problems such as unexpected re-renders, state update failures, event handling issues, and template syntax errors. Designed for Vue developers seeking best practices and troubleshooting strategies, it streamlines the debugging process and enhances application stability.

npx skills add https://github.com/hyf0/vue-skills --skill vue-debug-guides

Vue 3 debugging and error handling for runtime issues, warnings, async failures, and hydration bugs. For development best practices and common gotchas, use vue-best-practices.

Reactivity

Computed

Watchers

Components

Props & Emits

Templates

Template Refs

Forms & v-model

Events & Modifiers

Lifecycle

Slots

Provide/Inject

Attrs

Composables

Composition API

Animation

TypeScript

Async Components

Render Functions

KeepAlive

Transitions

Teleport

Suspense

SSR

Performance

SFC (Single File Components)

Plugins

App Configuration

GitHub Owner

Owner: hyf0

Files

reactivity-debugging-hooks

ref-value-access

reactive-destructuring

refs-in-collections-need-value

template-ref-unwrapping-top-level

reactivity-proxy-identity-hazard

reactivity-markraw-for-non-reactive

reactivity-same-tick-batching

computed-no-side-effects

computed-return-value-readonly

computed-conditional-dependencies

computed-array-mutation

computed-no-parameters

watch-async-cleanup

watch-async-creation-memory-leak

watch-reactive-property-getter

watcheffect-async-dependency-tracking

watch-flush-timing

watch-deep-same-object-reference

watcheffect-flush-post-for-refs

local-components-not-in-descendants

click-events-on-components

component-ref-requires-defineexpose

in-dom-template-parsing-caveats

component-naming-conflicts

multi-root-component-class-attrs

prop-defineprops-scope-limitation

declare-emits-for-documentation

defineEmits-must-be-top-level

defineEmits-no-runtime-and-type-mixed

native-event-collision-with-emits

undeclared-emits-double-firing

template-expressions-restrictions

v-if-null-check-order

dynamic-argument-constraints

v-else-must-follow-v-if

no-v-if-with-v-for

template-functions-no-side-effects

v-for-component-props

v-for-computed-reverse-sort

v-for-key-attribute

v-for-range-starts-at-one

v-show-template-limitation

template-ref-null-with-v-if

template-ref-v-for-order

use-template-ref-vue35

v-model-ignores-html-attributes

textarea-no-interpolation

select-initial-value-ios-bug

define-model-default-value-sync

definemodel-object-mutation-no-emit

v-model-ime-composition

v-model-number-modifier-behavior

checkbox-true-false-value-form-submission

event-modifier-order-matters

keyup-modifier-timing

exact-modifier-for-precise-shortcuts

no-passive-with-prevent

cleanup-side-effects

lifecycle-dom-access-timing

dom-update-timing-nexttick

lifecycle-ssr-awareness

lifecycle-hooks-synchronous-registration

slot-render-scope-parent-only

slot-named-scoped-explicit-default

slot-v-slot-on-components-or-templates-only

slot-implicit-default-content

slot-name-reserved-prop

slot-forwarding-to-child-components

provide-inject-synchronous-setup

provide-inject-debugging-challenges

provide-inject-reactivity-not-automatic

provide-inject-default-value-factory

attrs-event-listener-merging

fallthrough-attrs-overwrite-vue3

inheritattrs-false-for-wrapper-components

composable-call-location-restrictions

composable-tovalue-inside-watcheffect

composable-avoid-hidden-side-effects

composable-naming-return-pattern

composition-api-script-setup-async-context

define-expose-before-await

composition-api-not-functional-programming

composition-api-vs-react-hooks-differences

animation-key-for-rerender

animation-transitiongroup-performance

ts-withdefaults-mutable-factory-function

ts-reactive-no-generic-argument

ts-template-ref-null-handling

ts-defineprops-boolean-default-false

ts-defineprops-imported-types-limitations

ts-event-handler-explicit-typing

ts-shallowref-for-dynamic-components

ts-template-type-casting

async-component-vue-router

async-component-error-handling

async-component-keepalive-ref-issue

rendering-render-function-return-from-setup

render-function-vnodes-must-be-unique

rendering-resolve-component-for-string-names

render-function-avoid-internal-vnode-properties

rendering-render-function-h-import-vue3

rendering-render-function-slots-as-functions

keepalive-router-nested-double-mount

keepalive-transition-memory-leak

transition-js-hooks-done-callback

transition-group-flip-inline-elements

transition-group-move-animation-position-absolute

transition-group-no-default-wrapper-vue3

transition-nested-duration

transition-reusable-scoped-style

transition-router-view-appear

transition-type-when-mixed

transition-unmount-hook-timing

teleport-target-must-exist

teleport-ssr-hydration

teleport-scoped-styles-limitation

suspense-no-builtin-error-handling

suspense-ssr-hydration-issues

async-component-suspense-control

ssr-hydration-mismatch-causes

state-ssr-cross-request-pollution

ssr-platform-specific-apis

perf-props-stability-update-optimization

perf-computed-object-stability

sfc-named-exports-forbidden

sfc-script-setup-reactivity

sfc-scoped-css-child-component-styling

sfc-scoped-css-dynamic-content

sfc-scoped-css-slot-content

tailwind-dynamic-class-generation

self-referencing-component-name

plugin-global-properties-sparingly

plugin-install-before-mount

plugin-prefer-provide-inject-over-global-properties

plugin-typescript-type-augmentation

configure-app-before-mount

mount-return-value

dynamic-component-registration-vite

SKILL.md


name: vue-debug-guides description: Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.

Vue 3 debugging and error handling for runtime issues, warnings, async failures, and hydration bugs. For development best practices and common gotchas, use vue-best-practices.

Reactivity

Computed

Watchers

Components

Props & Emits

Templates

Template Refs

Forms & v-model

Events & Modifiers

Lifecycle

Slots

Provide/Inject

Attrs

Composables

Composition API

Animation

TypeScript

Async Components

Render Functions

KeepAlive

Transitions

Teleport

Suspense

SSR

Performance

SFC (Single File Components)

Plugins

App Configuration

More skills