Vue

Avoid common Vue mistakes — reactivity traps, ref vs reactive, computed timing, and Composition API pitfalls.

Security Scan

This is a documentation-only Vue guidance skill whose requirements and instructions match its stated purpose and do not request credentials, install code, or perform unexpected actions.

Purpose & Capability

Name/description (Vue guidance, Composition API, reactivity) align with the bundled documents (SKILL.md + topic markdowns). The single required binary 'node' is reasonable for a Vue-focused skill (development/runtime context) and no unrelated credentials or tools are requested.

Instruction Scope

SKILL.md and the included files are purely advisory: they describe patterns, traps, and best practices. There are no runtime commands, file reads, environment accesses, or external endpoints referenced in the instructions that would exceed the stated purpose.

Install Mechanism

This is an instruction-only skill with no install spec and no code files to write or execute. That is the lowest-risk install model and is proportionate for a documentation skill.

Credentials

The skill requests no environment variables, no credentials, and no config paths. This is appropriate for a purely informational Vue guidance skill.

Persistence & Privilege

always is false and disable-model-invocation is false (normal). The skill does not request permanent presence or elevated privileges and does not modify other skills' configuration.

Assessment

This skill is documentation-only: it provides Vue 3 advice and contains no code, installers, or credential requests. It's safe to enable from a permissions/credentials perspective. As with any skill, be aware agents may use the guidance autonomously (normal behavior); if you want to avoid autonomous use, disable model invocation for skills on your agent. If you expect runnable samples or tooling, verify they come from a trusted package or repository before executing any downloaded code.

When to Use

User needs Vue expertise — from Composition API patterns to production optimization. Agent handles reactivity, component design, state management, and performance.

Quick Reference

Topic	File
Reactivity patterns	reactivity.md
Component patterns	components.md
Composables design	composables.md
Performance optimization	performance.md

Composition API Philosophy

• Composition API is not about replacing Options API—it's about better code organization
• Group code by feature, not by option type—related logic stays together
• Extract reusable logic into composables—the main win of Composition API
• <script setup> is the recommended syntax—cleaner and better performance

Reactivity Traps

• ref for primitives—access with .value in script, auto-unwrapped in template
• reactive can't reassign whole object—state = {...} breaks reactivity
• Destructuring reactive loses reactivity—use toRefs(state) to preserve
• Array index assignment reactive in Vue 3—arr[0] = x works, unlike Vue 2
• Nested refs unwrap inside reactive—reactive({count: ref(0)}).count is number, not ref

Watch vs Computed

• computed for derived state—cached, recalculates only when dependencies change
• watch for side effects—when you need to DO something in response to changes
• computed should be pure—no side effects, no async
• watchEffect for immediate reaction with auto-tracked dependencies

Watch Traps

• Watching reactive object needs deep: true—or watch a getter function
• watch is lazy by default—use immediate: true for initial run
• Watch callback receives old/new—watch(source, (newVal, oldVal) => {})
• watchEffect can't access old value—use watch if you need old/new comparison
• Stop watchers with returned function—const stop = watch(...); stop()

Props and Emits Traps

• defineProps for type-safe props—defineProps<{ msg: string }>()
• Props are readonly—don't mutate, emit event to parent
• defineEmits for type-safe events—defineEmits<{ (e: 'update', val: string): void }>()
• v-model is :modelValue + @update:modelValue—custom v-model with defineModel()
• Default value for objects must be factory function—default: () => ({})

Template Ref Traps

• ref="name" + const name = ref(null)—names must match exactly
• Template refs available after mount—access in onMounted, not during setup
• ref on component gives component instance—ref on element gives DOM element
• Template ref with v-for becomes array of refs

Lifecycle Traps

• onMounted for DOM access—component mounted to DOM
• onUnmounted for cleanup—subscriptions, timers, event listeners
• onBeforeMount runs before DOM insert—rarely needed but exists
• Hooks must be called synchronously in setup—not inside callbacks or conditionals
• Async setup needs <Suspense> wrapper

Provide/Inject Traps

• provide('key', value) in parent—inject('key') in any descendant
• Reactive if value is ref/reactive—otherwise static snapshot
• Default value: inject('key', defaultVal)—third param for factory function
• Symbol keys for type safety—avoid string key collisions

Vue Router Traps

• useRoute for current route—reactive, use in setup
• useRouter for navigation—router.push('/path')
• Navigation guards: beforeEach, beforeResolve, afterEach—return false to cancel
• <RouterView> with named views—multiple views per route

Common Mistakes

• v-if vs v-show—v-if removes from DOM, v-show toggles display
• Key on v-for required—v-for="item in items" :key="item.id"
• Event modifiers order matters—.prevent.stop vs .stop.prevent
• Teleport for modals—<Teleport to="body"> renders outside component tree