vuejs-ai avatar

Vue Debug Guides

vuejs-ai/skills
1.9k

This skill provides comprehensive guidance on debugging Vue 3 applications, covering runtime issues, reactivity problems, component errors, props, events, and template syntax challenges. It offers specific solutions for common pitfalls like unexpected re-renders, computed property issues, watcher bugs, and template expression errors. Designed for Vue developers, it helps troubleshoot and optimize Vue app performance and correctness.

npx skills add https://github.com/vuejs-ai/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: vuejs-ai

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