vue-best-practices

Malicious tool definition detected

Tool: LICENSE.md Description: MIT License Copyright (c) 2025 hyf0, SerKo <https://github.com/serkodev> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, s

Malicious tool definition detected

Tool: SKILL.md [1/3] Description: --- name: vue-best-practices description: MUST be used for Vue.js tasks.

Tool: SKILL.md [2/3]

Description: Rendering lists in render functions without keys → See [render-function-v-for-keys-required](reference/render-function-v-for-keys-required.md) - Implementing .stop, .prevent in render functions → See [render-function-event-modifiers](reference/render-function-event-modifiers.md) - Two-way binding on components in render functions → See [render-function-v-model-implementation](reference/render-function-v-model-implementation.md) - Using string names for components in render functions

Malicious tool definition detected

Tool: reference/animation-class-based-technique.md Description: --- title: Use Class-based Animations for Non-Enter/Leave Effects impact: LOW impactDescription: Class-based animations are simpler and more performant for elements that remain in the DOM type: best-practice tags: [vue3, animation, css, class-binding, state] --- # Use Class-based Animations for Non-Enter/Leave Effects **Impact: LOW** - For animations on elements that are not entering or leaving the DOM, use CSS class-based animation

Malicious tool definition detected

Tool: reference/animation-key-for-rerender.md Description: --- title: Use Key Attribute to Force Re-render Animations impact: MEDIUM impactDescription: Without key attributes, Vue reuses DOM elements and animation libraries like AutoAnimate cannot detect changes to animate type: gotcha tags: [vue3, animation, key, autoanimate, rerender, dom] --- # Use Key Attribute to Force Re-render Animations **Impact: MEDIUM** - Vue optimizes performance by reusing DOM elements when possible.

Malicious tool definition detected

Tool: reference/animation-state-driven-technique.md Description: --- title: State-driven Animations with CSS Transitions and Style Bindings impact: LOW impactDescription: Combining Vue's reactive style bindings with CSS transitions creates smooth, interactive animations type: best-practice tags: [vue3, animation, css, transition, style-binding, state, interactive] --- # State-driven Animations with CSS Transitions and Style Bindings **Impact: LOW** - For responsive, interactive animations that r

Malicious tool definition detected

Tool: reference/animation-transitiongroup-performance.md Description: --- title: TransitionGroup Performance with Large Lists and CSS Frameworks impact: MEDIUM impactDescription: TransitionGroup can cause noticeable DOM update lag when animating list changes, especially with CSS frameworks type: gotcha tags: [vue3, transition-group, animation, performance, list, css-framework] --- # TransitionGroup Performance with Large Lists and CSS Frameworks **Impact: MEDIUM** - Vue's `<TransitionGroup>` can

Malicious tool definition detected

Tool: reference/async-component-error-handling.md Description: # Async Component Error Handling ## Rule Always configure error handling for async components using `errorComponent` and/or `onError` callback.

Malicious tool definition detected

Tool: reference/async-component-hydration-strategies.md Description: # Async Component Lazy Hydration Strategies (Vue 3.5+) ## Rule In Vue 3.5+, use hydration strategies with async components to control when SSR-rendered components become interactive.

Malicious tool definition detected

Tool: reference/async-component-keepalive-ref-issue.md Description: # Async Components with keep-alive Ref Issues ## Rule When using `<keep-alive>`, `<component>`, and `defineAsyncComponent` together, be aware that template refs can become undefined when the component is re-activated after being deactivated.

Malicious tool definition detected

Tool: reference/async-component-loading-delay.md Description: # Async Component Loading Delay for Flicker Prevention ## Rule Use the `delay` option (default 200ms) when configuring async components with a `loadingComponent`.

Malicious tool definition detected

Tool: reference/async-component-suspense-control.md Description: # Async Components Are Suspensible by Default ## Rule Async components created with `defineAsyncComponent` are automatically treated as async dependencies of any parent `<Suspense>` component.

Malicious tool definition detected

Tool: reference/async-component-vue-router.md Description: # Do Not Use defineAsyncComponent with Vue Router ## Rule Never use `defineAsyncComponent` when configuring Vue Router route components.

Malicious tool definition detected

Tool: reference/attrs-event-listener-merging.md Description: # Fallthrough Event Listeners Are Additive ## Rule When an event listener is passed to a component as a fallthrough attribute, it is added to the root element's existing listeners of the same type - both will trigger.

Malicious tool definition detected

Tool: reference/attrs-hyphenated-property-access.md Description: # Accessing Hyphenated Attributes in $attrs ## Rule Fallthrough attributes preserve their original casing in JavaScript.

Malicious tool definition detected

Tool: reference/attrs-not-reactive.md Description: --- title: useAttrs() Object Is Not Reactive impact: MEDIUM impactDescription: Watching attrs directly does not trigger - use onUpdated() or convert to props type: gotcha tags: [vue3, attrs, reactivity, composition-api] --- # useAttrs() Object Is Not Reactive **Impact: MEDIUM** - The object returned by `useAttrs()` is NOT reactive.

Malicious tool definition detected

Tool: reference/avoid-prop-drilling-use-provide-inject.md Description: --- title: Avoid Prop Drilling - Use Provide/Inject for Deep Component Trees impact: MEDIUM impactDescription: Passing props through many layers creates maintenance burden and tight coupling between intermediate components type: best-practice tags: [vue3, props, provide-inject, component-design, state-management, architecture] --- # Avoid Prop Drilling - Use Provide/Inject for Deep Component Trees **Impact: MEDIUM** - Prop dr

Malicious tool definition detected

Tool: reference/checkbox-true-false-value-form-submission.md Description: --- title: Checkbox true-value/false-value Not Submitted in Forms impact: MEDIUM impactDescription: true-value and false-value attributes don't affect form submission - unchecked boxes send nothing type: capability tags: [vue3, v-model, forms, checkbox, form-submission] --- # Checkbox true-value/false-value Not Submitted in Forms **Impact: MEDIUM** - Vue's `true-value` and `false-value` attributes only affect the JavaScrip

Malicious tool definition detected

Tool: reference/cleanup-side-effects.md Description: --- title: Clean Up Event Listeners and Intervals in onUnmounted impact: HIGH impactDescription: Failing to clean up side effects causes memory leaks and ghost event handlers type: capability tags: [vue3, lifecycle, memory-leak, event-listeners, intervals, cleanup] --- # Clean Up Event Listeners and Intervals in onUnmounted **Impact: HIGH** - Failing to clean up event listeners, intervals, timeouts, and subscriptions when a component unmounts

Malicious tool definition detected

Tool: reference/click-events-on-components.md Description: --- title: Click Events on Custom Components Require Emit or Fallthrough impact: HIGH impactDescription: Native click events on custom components won't work without proper emit declaration or attribute fallthrough type: gotcha tags: [vue3, events, components, emit, click, migration] --- # Click Events on Custom Components Require Emit or Fallthrough **Impact: HIGH** - Unlike native HTML elements, custom Vue components don't automatically

Malicious tool definition detected

Tool: reference/component-events-dont-bubble.md Description: --- title: Component Events Don't Bubble impact: MEDIUM impactDescription: Vue component events only reach direct parent - sibling and grandparent communication requires alternative patterns type: gotcha tags: [vue3, events, emit, event-bubbling, provide-inject, state-management] --- # Component Events Don't Bubble **Impact: MEDIUM** - Unlike native DOM events, Vue component events do NOT bubble up the component tree.

Malicious tool definition detected

Tool: reference/component-naming-conflicts.md Description: --- title: Avoid Component Naming Conflicts Between Global and Local impact: HIGH impactDescription: Naming conflicts cause unexpected component rendering and hard-to-debug issues type: gotcha tags: [vue3, component-registration, naming-conflicts, global-local, debugging] --- # Avoid Component Naming Conflicts Between Global and Local **Impact: HIGH** - When a global component and a local component have the same name (or resolve to the s

Malicious tool definition detected

Tool: reference/component-naming-pascalcase.md Description: --- title: Use PascalCase for Component Names impact: LOW impactDescription: Improves code clarity and IDE support, but both cases work type: best-practice tags: [vue3, component-registration, naming-conventions, pascalcase, ide-support] --- # Use PascalCase for Component Names **Impact: LOW** - Vue supports both PascalCase (`<MyComponent>`) and kebab-case (`<my-component>`) in templates, but PascalCase is recommended.

Malicious tool definition detected

Tool: reference/component-ref-requires-defineexpose.md Description: --- title: Component Refs Require defineExpose with Script Setup impact: HIGH impactDescription: Parent components cannot access child ref properties unless explicitly exposed type: gotcha tags: [vue3, template-refs, script-setup, defineExpose, component-communication] --- # Component Refs Require defineExpose with Script Setup **Impact: HIGH** - Components using `<script setup>` are private by default.

Malicious tool definition detected

Tool: reference/composable-avoid-hidden-side-effects.md Description: --- title: Avoid Hidden Side Effects in Composables impact: HIGH impactDescription: Side effects hidden in composables make debugging difficult and create implicit coupling between components type: best-practice tags: [vue3, composables, composition-api, side-effects, provide-inject, global-state] --- # Avoid Hidden Side Effects in Composables **Impact: HIGH** - Composables should encapsulate stateful logic, not hide side effec

Malicious tool definition detected

Tool: reference/composable-call-location-restrictions.md Description: --- title: Call Composables Only in Setup Context Synchronously impact: HIGH impactDescription: Composables called outside setup context or asynchronously fail to register lifecycle hooks and may cause memory leaks type: gotcha tags: [vue3, composables, composition-api, setup, async, lifecycle] --- # Call Composables Only in Setup Context Synchronously **Impact: HIGH** - Composables must be called synchronously within `<script

Malicious tool definition detected

Tool: reference/composable-composition-pattern.md Description: --- title: Compose Composables for Complex Logic impact: MEDIUM impactDescription: Building composables from other composables creates reusable, testable building blocks type: best-practice tags: [vue3, composables, composition-api, patterns, code-organization] --- # Compose Composables for Complex Logic **Impact: MEDIUM** - Composables can (and should) call other composables.

Malicious tool definition detected

Tool: reference/composable-naming-return-pattern.md Description: --- title: Follow Composable Naming Convention and Return Pattern impact: MEDIUM impactDescription: Inconsistent composable patterns lead to confusing APIs and reactivity issues when destructuring type: best-practice tags: [vue3, composables, composition-api, naming, conventions, refs] --- # Follow Composable Naming Convention and Return Pattern **Impact: MEDIUM** - Vue composables should follow established conventions: prefix name

Malicious tool definition detected

Tool: reference/composable-options-object-pattern.md Description: --- title: Use Options Object Pattern for Composable Parameters impact: MEDIUM impactDescription: Long parameter lists are error-prone and unclear; options objects are self-documenting and extensible type: best-practice tags: [vue3, composables, composition-api, api-design, typescript, patterns] --- # Use Options Object Pattern for Composable Parameters **Impact: MEDIUM** - When a composable accepts multiple parameters (especially

Malicious tool definition detected

Tool: reference/composable-readonly-state.md Description: --- title: Return State as Readonly with Explicit Update Methods impact: MEDIUM impactDescription: Exposing mutable state directly allows uncontrolled mutations scattered throughout the codebase type: best-practice tags: [vue3, composables, composition-api, readonly, encapsulation, state-management] --- # Return State as Readonly with Explicit Update Methods **Impact: MEDIUM** - When a composable manages state that should only be modified

Malicious tool definition detected

Tool: reference/composable-tovalue-inside-watcheffect.md Description: --- title: Call toValue() Inside watchEffect for Proper Dependency Tracking impact: HIGH impactDescription: Calling toValue() outside watchEffect prevents reactive dependency tracking, causing the effect to never re-run type: gotcha tags: [vue3, composables, composition-api, watchEffect, toValue, reactivity] --- # Call toValue() Inside watchEffect for Proper Dependency Tracking **Impact: HIGH** - When writing composables that

Malicious tool definition detected

Tool: reference/composable-vs-utility-functions.md Description: --- title: Don't Wrap Utility Functions as Composables impact: MEDIUM impactDescription: Wrapping stateless utility functions as composables adds unnecessary complexity without any benefit type: best-practice tags: [vue3, composables, composition-api, utilities, patterns] --- # Don't Wrap Utility Functions as Composables **Impact: MEDIUM** - Not every function needs to be a composable.

Malicious tool definition detected

Tool: reference/composition-api-bundle-size-minification.md Description: --- title: Composition API Produces Smaller, More Efficient Bundles impact: LOW impactDescription: Understanding this helps justify Composition API adoption for performance-sensitive projects type: efficiency tags: [vue3, composition-api, bundle-size, minification, performance] --- # Composition API Produces Smaller, More Efficient Bundles **Impact: LOW** - The Composition API is more minification-friendly than the Options

Malicious tool definition detected

Tool: reference/composition-api-code-organization.md Description: --- title: Organize Composition API Code by Logical Concern, Not Option Type impact: MEDIUM impactDescription: Poor code organization in Composition API leads to spaghetti code worse than Options API type: best-practice tags: [vue3, composition-api, code-organization, refactoring, maintainability] --- # Organize Composition API Code by Logical Concern, Not Option Type **Impact: MEDIUM** - The Composition API removes the "guard rai

Malicious tool definition detected

Tool: reference/composition-api-mixins-replacement.md Description: --- title: Use Composables Instead of Mixins for Logic Reuse impact: HIGH impactDescription: Mixins cause naming conflicts, unclear data origins, and inflexible logic - composables solve all these problems type: best-practice tags: [vue3, composition-api, composables, mixins, refactoring, code-reuse] --- # Use Composables Instead of Mixins for Logic Reuse **Impact: HIGH** - Mixins, the primary logic reuse mechanism in Options API

Malicious tool definition detected

Tool: reference/composition-api-not-functional-programming.md Description: --- title: Composition API Uses Mutable Reactivity, Not Functional Programming impact: MEDIUM impactDescription: Misunderstanding the paradigm leads to incorrect state management patterns type: gotcha tags: [vue3, composition-api, reactivity, functional-programming, paradigm] --- # Composition API Uses Mutable Reactivity, Not Functional Programming **Impact: MEDIUM** - Despite being function-based, the Composition API fol

Malicious tool definition detected

Tool: reference/composition-api-options-api-coexistence.md Description: --- title: Composition and Options API Can Coexist in Same Component impact: LOW impactDescription: Understanding coexistence helps gradual migration and library integration type: best-practice tags: [vue3, composition-api, options-api, migration, interoperability] --- # Composition and Options API Can Coexist in Same Component **Impact: LOW** - Vue 3 allows using both APIs in the same component via the `setup()` option.

Malicious tool definition detected

Tool: reference/composition-api-script-setup-async-context.md Description: --- title: Top-Level await in script setup Preserves Component Context impact: HIGH impactDescription: Misunderstanding async context causes lifecycle hooks and watchers to silently fail type: gotcha tags: [vue3, composition-api, script-setup, async, await, suspense] --- # Top-Level await in script setup Preserves Component Context **Impact: HIGH** - In `<script setup>`, top-level `await` statements preserve component con

Malicious tool definition detected

Tool: reference/composition-api-vs-react-hooks-differences.md Description: --- title: Vue Composition API Runs Once, Unlike React Hooks impact: MEDIUM impactDescription: Understanding this difference prevents over-engineering and React patterns that don't apply type: gotcha tags: [vue3, composition-api, react-hooks, setup, stale-closure] --- # Vue Composition API Runs Once, Unlike React Hooks **Impact: MEDIUM** - Vue's `setup()` or `<script setup>` executes only once per component instance, whil

Malicious tool definition detected

Tool: reference/computed-array-mutation.md Description: --- title: Avoid Mutating Methods on Arrays in Computed Properties impact: HIGH impactDescription: Array mutating methods in computed modify source data causing unexpected behavior type: capability tags: [vue3, computed, arrays, mutation, sort, reverse] --- # Avoid Mutating Methods on Arrays in Computed Properties **Impact: HIGH** - JavaScript array methods like `reverse()`, `sort()`, `splice()`, `push()`, `pop()`, `shift()`, and `unshift()

Malicious tool definition detected

Tool: reference/computed-conditional-dependencies.md Description: --- title: Ensure All Dependencies Are Accessed in Computed Properties impact: HIGH impactDescription: Conditional logic can prevent dependency tracking causing stale computed values type: capability tags: [vue3, computed, reactivity, dependency-tracking, gotcha] --- # Ensure All Dependencies Are Accessed in Computed Properties **Impact: HIGH** - Vue tracks computed property dependencies by monitoring which reactive properties are

Malicious tool definition detected

Tool: reference/computed-no-parameters.md Description: --- title: Computed Properties Cannot Accept Parameters impact: MEDIUM impactDescription: Attempting to pass arguments to computed properties fails or defeats caching type: capability tags: [vue3, computed, methods, parameters, common-mistake] --- # Computed Properties Cannot Accept Parameters **Impact: MEDIUM** - Computed properties are designed to derive values from reactive state without parameters.

Malicious tool definition detected

Tool: reference/computed-no-side-effects.md Description: --- title: Computed Property Getters Must Be Side-Effect Free impact: HIGH impactDescription: Side effects in computed getters break reactivity and cause unpredictable behavior type: efficiency tags: [vue3, computed, reactivity, side-effects, best-practices] --- # Computed Property Getters Must Be Side-Effect Free **Impact: HIGH** - Computed getter functions should only perform pure computation.

Malicious tool definition detected

Tool: reference/computed-properties-for-class-logic.md Description: # Use Computed Properties for Complex Class Logic ## Rule When class bindings involve multiple conditions or complex logic, extract them into computed properties rather than writing inline expressions in templates.

Malicious tool definition detected

Tool: reference/computed-return-value-readonly.md Description: --- title: Never Mutate Computed Property Return Values impact: HIGH impactDescription: Mutating computed values causes silent failures and lost changes type: capability tags: [vue3, computed, reactivity, immutability, common-mistake] --- # Never Mutate Computed Property Return Values **Impact: HIGH** - The returned value from a computed property is derived state - a temporary snapshot.

Malicious tool definition detected

Tool: reference/computed-vs-methods-caching.md Description: --- title: Use Computed Properties for Cached Reactive Derivations impact: MEDIUM impactDescription: Methods recalculate on every render while computed properties cache results type: efficiency tags: [vue3, computed, methods, performance, caching] --- # Use Computed Properties for Cached Reactive Derivations **Impact: MEDIUM** - Computed properties are cached based on their reactive dependencies and only re-evaluate when dependencies ch

Malicious tool definition detected

Tool: reference/configure-app-before-mount.md Description: --- title: Configure Vue App Before Calling mount() impact: HIGH impactDescription: App configurations after mount() are silently ignored, causing missing plugins and handlers type: capability tags: [vue3, createApp, mount, configuration, setup] --- # Configure Vue App Before Calling mount() **Impact: HIGH** - Any app configurations applied after `.mount()` is called are silently ignored.

Malicious tool definition detected

Tool: reference/declare-emits-for-documentation.md Description: --- title: Always Declare Emits for Documentation and Validation impact: MEDIUM impactDescription: Undeclared emits cause warnings, break TypeScript inference, and prevent event validation type: best-practice tags: [vue3, emits, defineEmits, component-events, typescript, documentation] --- # Always Declare Emits for Documentation and Validation **Impact: MEDIUM** - Declaring emitted events with `defineEmits()` or the `emits` option

Malicious tool definition detected

Tool: reference/define-expose-before-await.md Description: --- title: defineExpose Must Be Called Before Any Await impact: HIGH impactDescription: Properties exposed after await are inaccessible to parent component refs type: gotcha tags: [vue3, script-setup, defineExpose, async, component-refs] --- # defineExpose Must Be Called Before Any Await **Impact: HIGH** - In `<script setup>`, if you call `defineExpose()` after an `await` statement, the exposed properties will NOT be accessible to parent

Malicious tool definition detected

Tool: reference/define-model-default-value-sync.md Description: --- title: defineModel Default Value Can Cause Parent-Child Desync impact: HIGH impactDescription: Default values in defineModel don't sync back to parent, causing state inconsistency type: capability tags: [vue3, v-model, defineModel, components, props, two-way-binding] --- # defineModel Default Value Can Cause Parent-Child Desync **Impact: HIGH** - When using `defineModel()` with a default value and the parent doesn't provide a va

Malicious tool definition detected

Tool: reference/defineEmits-must-be-top-level.md Description: --- title: defineEmits Must Be Used at Top Level of script setup impact: HIGH impactDescription: Using defineEmits inside functions causes compilation errors - macros must be at module scope type: gotcha tags: [vue3, defineEmits, script-setup, macros, composition-api] --- # defineEmits Must Be Used at Top Level of script setup **Impact: HIGH** - The `defineEmits()` macro can only be used directly within `<script setup>` at the top lev

Malicious tool definition detected

Tool: reference/defineEmits-no-runtime-and-type-mixed.md Description: --- title: Cannot Mix Runtime and Type Declarations in defineEmits impact: HIGH impactDescription: Using both array/object syntax AND TypeScript generics in defineEmits causes compile errors type: gotcha tags: [vue3, defineEmits, typescript, compilation-error, script-setup] --- # Cannot Mix Runtime and Type Declarations in defineEmits **Impact: HIGH** - `defineEmits` supports two declaration styles: runtime (array/object synta

Malicious tool definition detected

Tool: reference/definemodel-hidden-modifier-props.md Description: --- title: defineModel Creates Hidden Modifier Props - Avoid Naming Conflicts impact: MEDIUM impactDescription: defineModel automatically adds hidden *Modifiers props that can conflict with your prop names type: gotcha tags: [vue3, v-model, defineModel, modifiers, props, naming] --- # defineModel Creates Hidden Modifier Props - Avoid Naming Conflicts **Impact: MEDIUM** - When using `defineModel()`, Vue automatically creates hidden

Malicious tool definition detected

Tool: reference/definemodel-object-mutation-no-emit.md Description: --- title: defineModel Object Properties Must Be Replaced, Not Mutated impact: HIGH impactDescription: Mutating object properties via defineModel doesn't emit update events, breaking parent sync type: gotcha tags: [vue3, v-model, defineModel, objects, reactivity, two-way-binding] --- # defineModel Object Properties Must Be Replaced, Not Mutated **Impact: HIGH** - When using `defineModel()` with objects or arrays, directly mutati

Malicious tool definition detected

Tool: reference/definemodel-value-next-tick.md Description: --- title: defineModel Value Changes Apply After Next Tick impact: MEDIUM impactDescription: Reading model.value immediately after setting it returns the old value, not the new one type: gotcha tags: [vue3, v-model, defineModel, reactivity, timing, nextTick] --- # defineModel Value Changes Apply After Next Tick **Impact: MEDIUM** - When you assign a new value to a `defineModel()` ref, the change doesn't take effect immediately.

Malicious tool definition detected

Tool: reference/directive-arguments-read-only.md Description: --- title: Treat Directive Hook Arguments as Read-Only impact: MEDIUM impactDescription: Modifying directive arguments causes unpredictable behavior and breaks Vue's internal state type: gotcha tags: [vue3, directives, hooks, read-only, dataset] --- # Treat Directive Hook Arguments as Read-Only **Impact: MEDIUM** - Apart from `el`, you should treat all directive hook arguments (`binding`, `vnode`, `prevVnode`) as read-only and never m

Malicious tool definition detected

Tool: reference/directive-avoid-on-components.md Description: --- title: Avoid Using Custom Directives on Components impact: HIGH impactDescription: Custom directives on multi-root components are silently ignored, causing unexpected behavior type: gotcha tags: [vue3, directives, components, multi-root, best-practices] --- # Avoid Using Custom Directives on Components **Impact: HIGH** - Using custom directives on components is not recommended and can lead to unexpected behavior.

Malicious tool definition detected

Tool: reference/directive-cleanup-in-unmounted.md Description: --- title: Clean Up Side Effects in Directive unmounted Hook impact: HIGH impactDescription: Failing to clean up intervals, event listeners, and subscriptions in directives causes memory leaks type: gotcha tags: [vue3, directives, memory-leak, cleanup, unmounted, event-listeners] --- # Clean Up Side Effects in Directive unmounted Hook **Impact: HIGH** - A common and critical mistake when creating custom directives is forgetting to cl

Malicious tool definition detected

Tool: reference/directive-function-shorthand.md Description: --- title: Use Function Shorthand for Simple Directives impact: LOW impactDescription: Function shorthand reduces boilerplate for directives with identical mounted/updated behavior type: best-practice tags: [vue3, directives, shorthand, code-style] --- # Use Function Shorthand for Simple Directives **Impact: LOW** - It's common for a custom directive to have the same behavior for `mounted` and `updated`, with no need for other hooks.

Malicious tool definition detected

Tool: reference/directive-naming-v-prefix.md Description: --- title: Use v-prefix Naming Convention for Local Directives impact: LOW impactDescription: Proper naming enables automatic directive recognition in script setup type: best-practice tags: [vue3, directives, naming, script-setup, conventions] --- # Use v-prefix Naming Convention for Local Directives **Impact: LOW** - In `<script setup>`, any camelCase variable starting with the `v` prefix can automatically be used as a custom directive.

Malicious tool definition detected

Tool: reference/directive-prefer-declarative-templating.md Description: --- title: Prefer Built-in Directives Over Custom Directives impact: MEDIUM impactDescription: Custom directives are less efficient than built-in directives and not SSR-friendly type: best-practice tags: [vue3, directives, performance, ssr, best-practices] --- # Prefer Built-in Directives Over Custom Directives **Impact: MEDIUM** - Custom directives should only be used when the desired functionality can only be achieved via

Malicious tool definition detected

Tool: reference/directive-vs-component-decision.md Description: --- title: Know When to Use Directives vs Components impact: MEDIUM impactDescription: Using directives when components are more appropriate leads to harder maintenance and testing type: best-practice tags: [vue3, directives, components, architecture, best-practices] --- # Know When to Use Directives vs Components **Impact: MEDIUM** - Accessing the component instance from within a custom directive is often a sign that the directive

Malicious tool definition detected

Tool: reference/directive-vue2-migration-hooks.md Description: --- title: Vue 3 Directive Hooks Renamed from Vue 2 impact: HIGH impactDescription: Using Vue 2 hook names in Vue 3 causes directives to silently fail type: gotcha tags: [vue3, vue2, migration, directives, hooks, breaking-change] --- # Vue 3 Directive Hooks Renamed from Vue 2 **Impact: HIGH** - Vue 3 renamed all custom directive lifecycle hooks to align with component lifecycle hooks.

Malicious tool definition detected

Tool: reference/dom-update-timing-nexttick.md Description: --- title: Use nextTick() to Wait for DOM Updates impact: MEDIUM impactDescription: DOM updates are batched and asynchronous - direct DOM access after state changes sees stale values type: capability tags: [vue3, dom, nextTick, reactivity, async] --- # Use nextTick() to Wait for DOM Updates **Impact: MEDIUM** - Vue batches DOM updates asynchronously for performance.

Malicious tool definition detected

Tool: reference/dynamic-argument-constraints.md Description: --- title: Dynamic Directive Arguments Have Syntax Constraints impact: MEDIUM impactDescription: Invalid dynamic arguments cause silent failures or browser compatibility issues type: capability tags: [vue3, template, directives, v-bind, v-on, dynamic-arguments] --- # Dynamic Directive Arguments Have Syntax Constraints **Impact: MEDIUM** - Dynamic directive arguments (e.g., `:[attributeName]`, `@[eventName]`) have value and syntax const

Malicious tool definition detected

Tool: reference/dynamic-component-registration-vite.md Description: --- title: Use import.meta.glob for Dynamic Component Registration in Vite impact: MEDIUM impactDescription: require.context from Webpack doesn't work in Vite projects type: gotcha tags: [vue3, component-registration, vite, dynamic-import, migration, webpack] --- # Use import.meta.glob for Dynamic Component Registration in Vite **Impact: MEDIUM** - When migrating from Webpack to Vite or starting a new Vite project, the `require.

Malicious tool definition detected

Tool: reference/dynamic-components-with-keepalive.md Description: --- title: Use KeepAlive to Preserve Dynamic Component State impact: MEDIUM impactDescription: Dynamic component switching destroys and recreates components, losing all internal state unless wrapped in KeepAlive type: best-practice tags: [vue3, dynamic-components, keepalive, component-is, state-preservation, performance] --- # Use KeepAlive to Preserve Dynamic Component State **Impact: MEDIUM** - When switching between components

Malicious tool definition detected

Tool: reference/emit-kebab-case-in-templates.md Description: --- title: Use kebab-case for Event Listeners in Templates impact: LOW impactDescription: Vue auto-converts camelCase emits to kebab-case listeners but consistency improves readability type: best-practice tags: [vue3, events, emit, naming-convention, templates] --- # Use kebab-case for Event Listeners in Templates **Impact: LOW** - Vue automatically converts event names between camelCase and kebab-case.

Malicious tool definition detected

Tool: reference/emit-validation-for-complex-payloads.md Description: --- title: Use Event Validation for Complex Payloads impact: LOW impactDescription: Event validation catches payload errors early with console warnings during development type: best-practice tags: [vue3, emits, defineEmits, validation, debugging] --- # Use Event Validation for Complex Payloads **Impact: LOW** - Vue allows you to validate event payloads using object syntax for `defineEmits`.

Malicious tool definition detected

Tool: reference/event-modifier-order-matters.md Description: --- title: Event Modifier Order Matters impact: MEDIUM impactDescription: Modifier order affects event handling behavior - wrong order causes unexpected propagation or prevention type: gotcha tags: [vue3, events, modifiers, v-on, click, form] --- # Event Modifier Order Matters **Impact: MEDIUM** - When chaining event modifiers, the order determines behavior because Vue generates code in the same sequence.

Malicious tool definition detected

Tool: reference/event-once-modifier-for-single-use.md Description: --- title: Use .once Modifier for Single-Use Event Handlers impact: LOW impactDescription: The .once modifier auto-removes event listeners after first trigger, preventing repeated handler calls type: best-practice tags: [vue3, events, modifiers, once, event-handling] --- # Use .once Modifier for Single-Use Event Handlers **Impact: LOW** - Vue provides a `.once` modifier for event listeners that automatically removes the listener

Malicious tool definition detected

Tool: reference/exact-modifier-for-precise-shortcuts.md Description: --- title: Use .exact Modifier for Precise Keyboard/Mouse Shortcuts impact: MEDIUM impactDescription: Without .exact, shortcuts fire even when additional modifier keys are pressed, causing unintended behavior type: best-practice tags: [vue3, events, keyboard, modifiers, shortcuts, accessibility] --- # Use .exact Modifier for Precise Keyboard/Mouse Shortcuts **Impact: MEDIUM** - By default, Vue's modifier key handlers (`.ctrl`,

Malicious tool definition detected

Tool: reference/fallthrough-attrs-overwrite-vue3.md Description: # Fallthrough Attributes Overwrite Explicit Attributes in Vue 3 ## Rule In Vue 3, fallthrough attributes overwrite explicitly set attributes on the root element (except `class` and `style` which are merged).

Malicious tool definition detected

Tool: reference/in-dom-template-parsing-caveats.md Description: --- title: In-DOM Template Parsing Caveats impact: HIGH impactDescription: Browser HTML parsing before Vue compilation causes case sensitivity, self-closing tag, and element nesting issues type: gotcha tags: [vue3, templates, in-dom, html-parsing, kebab-case, self-closing-tags] --- # In-DOM Template Parsing Caveats **Impact: HIGH** - When writing Vue templates directly in the DOM (not in `.vue` files), the browser's native HTML pars

Malicious tool definition detected

Tool: reference/inheritattrs-false-for-wrapper-components.md Description: # Use inheritAttrs: false for Wrapper Components ## Rule When building wrapper components where attributes should be applied to an inner element instead of the root element, always set `inheritAttrs: false` and explicitly bind `$attrs` to the target element.

Malicious tool definition detected

Tool: reference/keepalive-component-name-requirement.md Description: --- title: KeepAlive Include/Exclude Requires Component Name impact: MEDIUM impactDescription: The include and exclude props match against component name option, which must be explicitly declared type: gotcha tags: [vue3, keepalive, component-name, include, exclude, sfc] --- # KeepAlive Include/Exclude Requires Component Name **Impact: MEDIUM** - When using `include` or `exclude` props on KeepAlive, the matching is done against

Malicious tool definition detected

Tool: reference/keepalive-memory-management.md Description: --- title: KeepAlive Memory Management - Prevent Memory Leaks impact: HIGH impactDescription: Unbounded KeepAlive caching can cause severe memory issues, especially with large or numerous components type: gotcha tags: [vue3, keepalive, memory-leak, performance, cache, max-prop] --- # KeepAlive Memory Management - Prevent Memory Leaks **Impact: HIGH** - KeepAlive caches component instances in memory.

Malicious tool definition detected

Tool: reference/keepalive-no-cache-removal-vue3.md Description: --- title: Vue 3 KeepAlive Has No Direct Cache Removal API impact: MEDIUM impactDescription: Unlike Vue 2, there is no way to programmatically remove a specific component from KeepAlive cache in Vue 3 type: gotcha tags: [vue3, keepalive, cache, migration, vue2-to-vue3] --- # Vue 3 KeepAlive Has No Direct Cache Removal API **Impact: MEDIUM** - Vue 3 removed the `$destroy()` method that Vue 2 developers used to indirectly clear KeepAl

Malicious tool definition detected

Tool: reference/keepalive-router-fresh-vs-cached.md Description: --- title: KeepAlive Router Navigation Fresh vs Cached Problem impact: MEDIUM impactDescription: When using KeepAlive with Vue Router, users may get cached pages when they expect fresh content type: gotcha tags: [vue3, keepalive, vue-router, navigation, cache, ux] --- # KeepAlive Router Navigation Fresh vs Cached Problem **Impact: MEDIUM** - When using KeepAlive with Vue Router, navigation from menus or breadcrumbs may show cached

Malicious tool definition detected

Tool: reference/keepalive-router-nested-double-mount.md Description: --- title: KeepAlive with Nested Routes Double Mount Issue impact: HIGH impactDescription: Using KeepAlive with nested Vue Router routes can cause child components to mount twice type: gotcha tags: [vue3, keepalive, vue-router, nested-routes, double-mount, bug] --- # KeepAlive with Nested Routes Double Mount Issue **Impact: HIGH** - When using `<KeepAlive>` with nested Vue Router routes, child route components may mount twice.

Malicious tool definition detected

Tool: reference/keepalive-transition-memory-leak.md Description: --- title: KeepAlive with Transition Memory Leak impact: MEDIUM impactDescription: Combining KeepAlive with Transition can cause memory leaks in certain Vue versions type: gotcha tags: [vue3, keepalive, transition, memory-leak, animation] --- # KeepAlive with Transition Memory Leak **Impact: MEDIUM** - There is a known memory leak when using `<Transition>` and `<KeepAlive>` together.

Malicious tool definition detected

Tool: reference/keyup-modifier-timing.md Description: --- title: System Modifier Keys Must Be Held During keyup Events impact: MEDIUM impactDescription: Modifier keys (ctrl, alt, shift, meta) behave differently with keyup - they must be held when the key is released type: gotcha tags: [vue3, events, keyboard, modifiers, keyup, shortcuts] --- # System Modifier Keys Must Be Held During keyup Events **Impact: MEDIUM** - When using system modifier keys (`.ctrl`, `.alt`, `.shift`, `.meta`) with `keyu

Malicious tool definition detected

Tool: reference/lifecycle-dom-access-timing.md Description: --- title: Access DOM Only After Mounted Hook impact: HIGH impactDescription: Accessing DOM elements before mounted causes undefined errors and silent failures type: capability tags: [vue3, vue2, lifecycle, dom, mounted, created, beforeMount, template-refs] --- # Access DOM Only After Mounted Hook **Impact: HIGH** - Attempting to access DOM elements or `this.$el` in `created` or `beforeMount` hooks fails because the component's template

Malicious tool definition detected

Tool: reference/lifecycle-hooks-synchronous-registration.md Description: --- title: Register Lifecycle Hooks Synchronously During Setup impact: HIGH impactDescription: Asynchronously registered lifecycle hooks will never execute type: capability tags: [vue3, composition-api, lifecycle, onMounted, onUnmounted, async, setup] --- # Register Lifecycle Hooks Synchronously During Setup **Impact: HIGH** - Lifecycle hooks registered asynchronously (e.g., inside setTimeout, after await) will never be cal

Malicious tool definition detected

Tool: reference/lifecycle-ssr-awareness.md Description: --- title: Mounted and Unmounted Hooks Do Not Run During SSR impact: MEDIUM impactDescription: SSR applications may fail if mounted-only code is essential for functionality type: capability tags: [vue3, lifecycle, ssr, server-side-rendering, nuxt, onMounted, mounted, hydration] --- # Mounted and Unmounted Hooks Do Not Run During SSR **Impact: MEDIUM** - During server-side rendering (SSR), lifecycle hooks like `mounted`, `onMounted`, `unmoun

Malicious tool definition detected

Tool: reference/local-components-not-in-descendants.md Description: --- title: Locally Registered Components Are Not Available in Descendants impact: HIGH impactDescription: Common source of "component not found" errors in nested components type: gotcha tags: [vue3, component-registration, local-registration, scope, nested-components] --- # Locally Registered Components Are Not Available in Descendants **Impact: HIGH** - Locally registered components are only available in the component where the

Malicious tool definition detected

Tool: reference/mount-return-value.md Description: --- title: mount() Returns Component Instance, Not App Instance impact: MEDIUM impactDescription: Using mount() return value for app configuration silently fails type: capability tags: [vue3, createApp, mount, api] --- # mount() Returns Component Instance, Not App Instance **Impact: MEDIUM** - The `.mount()` method returns the root component instance, not the application instance.

Malicious tool definition detected

Tool: reference/mouse-button-modifiers-intent.md Description: --- title: Mouse Button Modifiers Represent Intent, Not Physical Buttons impact: LOW impactDescription: Mouse modifiers .left/.right/.middle may not match physical buttons on left-handed mice or other input devices type: gotcha tags: [vue3, events, mouse, accessibility, modifiers] --- # Mouse Button Modifiers Represent Intent, Not Physical Buttons **Impact: LOW** - Vue's mouse button modifiers (`.left`, `.right`, `.middle`) are named

Malicious tool definition detected

Tool: reference/multi-root-component-class-attrs.md Description: # Multi-Root Component Class Attribute Inheritance ## Rule When a Vue 3 component has multiple root elements, class and style bindings from the parent will NOT automatically fall through.

Malicious tool definition detected

Tool: reference/multiple-app-instances.md Description: --- title: Use Multiple App Instances for Partial Page Control impact: MEDIUM impactDescription: Mounting single app to entire page when only controlling parts wastes resources and complicates SSR type: efficiency tags: [vue3, createApp, mount, ssr, progressive-enhancement, architecture] --- # Use Multiple App Instances for Partial Page Control **Impact: MEDIUM** - When Vue only controls specific parts of a page (common with server-rendered

Malicious tool definition detected

Tool: reference/native-event-collision-with-emits.md Description: --- title: Declaring Native Event Names in Emits Blocks Native Listeners impact: MEDIUM impactDescription: Declaring native events like 'click' in emits prevents native DOM event listeners from working type: gotcha tags: [vue3, emits, native-events, click, event-collision] --- # Declaring Native Event Names in Emits Blocks Native Listeners **Impact: MEDIUM** - When you declare a native DOM event name (like `click`, `input`, `focus

Malicious tool definition detected

Tool: reference/no-passive-with-prevent.md Description: --- title: Never Use .passive and .prevent Together impact: HIGH impactDescription: Conflicting modifiers cause .prevent to be ignored and trigger browser warnings type: gotcha tags: [vue3, events, modifiers, scroll, touch, performance] --- # Never Use .passive and .prevent Together **Impact: HIGH** - The `.passive` modifier tells the browser you will NOT call `preventDefault()`, while `.prevent` does exactly that.

Malicious tool definition detected

Tool: reference/no-v-if-with-v-for.md Description: --- title: Never Use v-if and v-for on the Same Element impact: HIGH impactDescription: Causes confusing precedence issues and Vue 2 to 3 migration bugs type: capability tags: [vue3, v-if, v-for, conditional-rendering, list-rendering, eslint] --- # Never Use v-if and v-for on the Same Element **Impact: HIGH** - Using `v-if` and `v-for` on the same element creates ambiguous precedence that differs between Vue 2 and Vue 3.

Malicious tool definition detected

Tool: reference/perf-avoid-component-abstraction-in-lists.md Description: --- title: Avoid Excessive Component Abstraction in Large Lists impact: MEDIUM impactDescription: Each component instance has memory and render overhead - abstractions multiply this in lists type: efficiency tags: [vue3, performance, components, abstraction, lists, optimization] --- # Avoid Excessive Component Abstraction in Large Lists **Impact: MEDIUM** - Component instances are more expensive than plain DOM nodes.

Malicious tool definition detected

Tool: reference/perf-computed-object-stability.md Description: --- title: Return Stable Object References from Computed Properties impact: MEDIUM impactDescription: Computed properties returning new objects trigger effects even when values haven't meaningfully changed type: efficiency tags: [vue3, computed, performance, reactivity, vue3.4] --- # Return Stable Object References from Computed Properties **Impact: MEDIUM** - In Vue 3.4+, computed properties only trigger effects when their value cha

Malicious tool definition detected

Tool: reference/perf-props-stability-update-optimization.md Description: --- title: Keep Props Stable to Minimize Child Re-renders impact: HIGH impactDescription: Passing changing props to list items causes ALL children to re-render unnecessarily type: efficiency tags: [vue3, performance, props, v-for, re-renders, optimization] --- # Keep Props Stable to Minimize Child Re-renders **Impact: HIGH** - When props passed to child components change, Vue must re-render those components.

Malicious tool definition detected

Tool: reference/perf-ssr-ssg-for-page-load.md Description: --- title: Use SSR or SSG for Page Load Critical Applications impact: HIGH impactDescription: Client-side SPAs require JavaScript execution before content appears, severely impacting LCP and INP metrics type: capability tags: [vue3, performance, ssr, ssg, nuxt, page-load, architecture] --- # Use SSR or SSG for Page Load Critical Applications **Impact: HIGH** - Pure client-side SPAs must download, parse, and execute JavaScript before user

Malicious tool definition detected

Tool: reference/perf-v-once-v-memo-directives.md Description: --- title: Use v-once and v-memo to Skip Unnecessary Updates impact: MEDIUM impactDescription: v-once skips all future updates for static content; v-memo conditionally memoizes subtrees type: efficiency tags: [vue3, performance, v-once, v-memo, optimization, directives] --- # Use v-once and v-memo to Skip Unnecessary Updates **Impact: MEDIUM** - Vue re-evaluates templates on every reactive change.

Malicious tool definition detected

Tool: reference/perf-virtualize-large-lists.md Description: --- title: Virtualize Large Lists to Avoid DOM Overload impact: HIGH impactDescription: Rendering thousands of list items creates excessive DOM nodes, causing slow renders and high memory usage type: efficiency tags: [vue3, performance, virtual-list, large-data, dom, optimization] --- # Virtualize Large Lists to Avoid DOM Overload **Impact: HIGH** - Rendering all items in a large list (hundreds or thousands) creates massive amounts of D

Malicious tool definition detected

Tool: reference/plugin-global-properties-sparingly.md Description: # Use Global Properties Sparingly in Plugins ## Rule When using `app.config.globalProperties` in Vue plugins, use them sparingly and with clear naming conventions.

Malicious tool definition detected

Tool: reference/plugin-install-before-mount.md Description: # Install Plugins Before Mounting the App ## Rule All plugins must be installed using `app.use()` BEFORE calling `app.mount()`.

Malicious tool definition detected

Tool: reference/plugin-prefer-provide-inject-over-global-properties.md Description: # Prefer provide/inject Over Global Properties in Plugins ## Rule When creating Vue plugins, prefer using `app.provide()` to make plugin functionality available to components instead of attaching properties to `app.config.globalProperties`.

Malicious tool definition detected

Tool: reference/plugin-structure-install-method.md Description: # Plugin Structure: Install Method Requirements ## Rule A Vue plugin must be either an object with an `install()` method, or a function that serves as the install function.

Malicious tool definition detected

Tool: reference/plugin-symbol-injection-keys.md Description: # Use Symbol Injection Keys in Plugins ## Rule When using `provide/inject` in Vue plugins, use Symbol keys (preferably with `InjectionKey<T>` for TypeScript) instead of string keys to prevent naming collisions and ensure type safety.

Malicious tool definition detected

Tool: reference/plugin-typescript-type-augmentation.md Description: # Proper TypeScript Type Augmentation for Plugins ## Rule When creating Vue plugins that add global properties, you MUST properly augment TypeScript types.

Malicious tool definition detected

Tool: reference/prefer-local-component-registration.md Description: --- title: Prefer Local Component Registration Over Global impact: MEDIUM impactDescription: Global registration prevents tree-shaking and creates implicit dependencies type: best-practice tags: [vue3, component-registration, tree-shaking, performance, maintainability] --- # Prefer Local Component Registration Over Global **Impact: MEDIUM** - Global registration prevents build tools from removing unused components (tree-shaking)

Malicious tool definition detected

Tool: reference/prefer-props-emit-over-component-refs.md Description: --- title: Prefer Props and Emit Over Component Refs impact: MEDIUM impactDescription: Component refs create tight coupling and break component abstraction type: best-practice tags: [vue3, component-refs, props, emit, component-design, architecture] --- # Prefer Props and Emit Over Component Refs **Impact: MEDIUM** - Using template refs to access child component internals creates tight coupling between parent and child.

Malicious tool definition detected

Tool: reference/prefer-ref-over-reactive.md Description: --- title: Prefer ref() Over reactive() for Consistency impact: MEDIUM impactDescription: Using ref() as default avoids reactive() gotchas and provides consistent patterns type: efficiency tags: [vue3, reactivity, ref, reactive, composition-api, best-practice] --- # Prefer ref() Over reactive() for Consistency **Impact: MEDIUM** - The Vue documentation recommends using `ref()` as the primary API for declaring reactive state.

Malicious tool definition detected

Tool: reference/prop-boolean-casting-order.md Description: --- title: Boolean Prop Type Order Affects Casting Behavior impact: MEDIUM impactDescription: Wrong type order causes boolean props to be parsed as empty strings instead of true type: gotcha tags: [vue3, props, boolean, type-casting, validation] --- # Boolean Prop Type Order Affects Casting Behavior **Impact: MEDIUM** - When a prop accepts multiple types including both `Boolean` and `String`, the order in the type array determines how at

Malicious tool definition detected

Tool: reference/prop-composable-reactivity-loss.md Description: --- title: Preserve Reactivity When Passing Props to Composables impact: HIGH impactDescription: Passing prop values directly to composables loses reactivity - composable won't update when props change type: gotcha tags: [vue3, props, composables, reactivity, composition-api] --- # Preserve Reactivity When Passing Props to Composables **Impact: HIGH** - A common mistake is passing data received from a prop directly to a composable.

Malicious tool definition detected

Tool: reference/prop-defineprops-scope-limitation.md Description: --- title: defineProps Cannot Access Variables from script setup impact: MEDIUM impactDescription: Variables declared in script setup are not accessible inside defineProps arguments type: gotcha tags: [vue3, props, script-setup, defineProps, compiler] --- # defineProps Cannot Access Variables from script setup **Impact: MEDIUM** - Code inside the `defineProps()` argument cannot access other variables declared in `<script setup>`.

Malicious tool definition detected

Tool: reference/prop-destructured-watch-getter.md Description: --- title: Wrap Destructured Props in Getters for watch and Composables impact: MEDIUM impactDescription: Passing destructured prop values directly to watch or composables loses reactivity type: gotcha tags: [vue3, props, reactivity, watch, composables, destructuring] --- # Wrap Destructured Props in Getters for watch and Composables **Impact: MEDIUM** - When you destructure props with `defineProps`, the destructured variables are re

Malicious tool definition detected

Tool: reference/prop-validation-before-instance.md Description: --- title: Props Are Validated Before Component Instance Creation impact: MEDIUM impactDescription: Instance properties like data and computed are unavailable in prop default/validator functions type: gotcha tags: [vue3, props, validation, lifecycle, default-values] --- # Props Are Validated Before Component Instance Creation **Impact: MEDIUM** - Prop validation and default value functions execute before the component instance is cr

Malicious tool definition detected

Tool: reference/props-are-read-only.md Description: --- title: Props Are Read-Only - Never Mutate Props impact: HIGH impactDescription: Mutating props breaks one-way data flow and causes unpredictable parent-child state synchronization issues type: gotcha tags: [vue3, props, one-way-data-flow, mutation, component-design] --- # Props Are Read-Only - Never Mutate Props **Impact: HIGH** - Props in Vue follow one-way data flow: parent to child only.

Malicious tool definition detected

Tool: reference/provide-inject-debugging-challenges.md Description: --- title: Provide/Inject Has Limited DevTools Support - Plan for Debugging impact: LOW impactDescription: Unlike props and state, provided values are harder to trace in Vue DevTools, making debugging more challenging type: gotcha tags: [vue3, provide-inject, debugging, devtools, architecture] --- # Provide/Inject Has Limited DevTools Support - Plan for Debugging **Impact: LOW** - While provide/inject is powerful for avoiding pr

Malicious tool definition detected

Tool: reference/provide-inject-default-value-factory.md Description: --- title: Use Factory Functions for Non-Primitive Inject Default Values impact: MEDIUM impactDescription: Using object literals as default values creates shared references across all consuming components type: gotcha tags: [vue3, provide-inject, composition-api, memory, shared-state] --- # Use Factory Functions for Non-Primitive Inject Default Values **Impact: MEDIUM** - When providing default values for `inject()`, using an o

Malicious tool definition detected

Tool: reference/provide-inject-mutations-in-provider.md Description: --- title: Keep Provide/Inject Mutations in the Provider Component impact: MEDIUM impactDescription: Allowing injectors to mutate provided state leads to unpredictable data flow and difficult debugging type: best-practice tags: [vue3, provide-inject, state-management, architecture, debugging] --- # Keep Provide/Inject Mutations in the Provider Component **Impact: MEDIUM** - When using reactive provide/inject values, mutations s

Malicious tool definition detected

Tool: reference/provide-inject-reactivity-not-automatic.md Description: --- title: Provide/Inject Values Are Not Reactive by Default impact: HIGH impactDescription: Provided primitive values lose reactivity, causing injecting components to not update when the source value changes type: gotcha tags: [vue3, provide-inject, reactivity, composition-api, options-api] --- # Provide/Inject Values Are Not Reactive by Default **Impact: HIGH** - A common misconception is that provide/inject automatically

Malicious tool definition detected

Tool: reference/provide-inject-symbol-keys.md Description: --- title: Use Symbol Keys for Provide/Inject in Large Applications impact: MEDIUM impactDescription: String injection keys can collide in large applications or when using third-party components type: best-practice tags: [vue3, provide-inject, typescript, architecture, component-library] --- # Use Symbol Keys for Provide/Inject in Large Applications **Impact: MEDIUM** - Using string keys for provide/inject works for small applications bu

Malicious tool definition detected

Tool: reference/provide-inject-synchronous-setup.md Description: --- title: Provide Must Be Called Synchronously During Setup impact: HIGH impactDescription: Calling provide() asynchronously or conditionally may fail silently or cause inconsistent injection behavior type: gotcha tags: [vue3, provide-inject, composition-api, async, setup] --- # Provide Must Be Called Synchronously During Setup **Impact: HIGH** - The `provide()` function must be called synchronously during the component's `setup()

Malicious tool definition detected

Tool: reference/reactive-destructuring.md Description: --- title: Never Destructure reactive() Objects Directly impact: HIGH impactDescription: Destructuring reactive objects breaks reactivity - changes won't trigger updates type: capability tags: [vue3, reactivity, reactive, composition-api, destructuring] --- # Never Destructure reactive() Objects Directly **Impact: HIGH** - Destructuring a `reactive()` object breaks the reactive connection.

Malicious tool definition detected

Tool: reference/reactivity-computed-over-watcheffect-mutations.md Description: --- title: Use computed() Instead of watchEffect() for Derived State impact: MEDIUM impactDescription: Using watchEffect to mutate refs creates unnecessary indirection - computed() is declarative and cached type: efficiency tags: [vue3, reactivity, computed, watchEffect, best-practice, performance] --- # Use computed() Instead of watchEffect() for Derived State **Impact: MEDIUM** - When you need state that derives fro

Malicious tool definition detected

Tool: reference/reactivity-debugging-hooks.md Description: --- title: Use Debug Hooks to Trace Reactivity Issues impact: MEDIUM impactDescription: Debug hooks help identify which dependencies trigger re-renders and watcher executions type: efficiency tags: [vue3, reactivity, debugging, computed, watch, development] --- # Use Debug Hooks to Trace Reactivity Issues **Impact: MEDIUM** - Vue provides debug hooks (`onTrack`, `onTrigger`, `renderTracked`, `renderTriggered`) that help identify exactly

Malicious tool definition detected

Tool: reference/reactivity-external-state-integration.md Description: --- title: Use shallowRef Pattern for External State Libraries impact: MEDIUM impactDescription: External state systems (Immer, XState, Redux) should use shallowRef to avoid double-wrapping in proxies type: efficiency tags: [vue3, reactivity, shallowRef, external-state, immer, xstate, integration] --- # Use shallowRef Pattern for External State Libraries **Impact: MEDIUM** - When integrating Vue with external state management

Malicious tool definition detected

Tool: reference/reactivity-markraw-for-non-reactive.md Description: --- title: Use markRaw() for Objects That Should Never Be Reactive impact: MEDIUM impactDescription: Library instances, DOM nodes, and complex objects cause overhead and bugs when wrapped in Vue proxies type: efficiency tags: [vue3, reactivity, markRaw, performance, external-libraries, dom] --- # Use markRaw() for Objects That Should Never Be Reactive **Impact: MEDIUM** - Vue's `markRaw()` tells the reactivity system to never wr

Malicious tool definition detected

Tool: reference/reactivity-proxy-identity-hazard.md Description: --- title: Avoid Comparing Reactive Objects with === Operator impact: HIGH impactDescription: Reactive proxies have different identity than original objects - comparison bugs are silent and hard to debug type: gotcha tags: [vue3, reactivity, proxy, comparison, debugging, identity] --- # Avoid Comparing Reactive Objects with === Operator **Impact: HIGH** - Vue's `reactive()` returns a Proxy wrapper that has a different identity than

Malicious tool definition detected

Tool: reference/reactivity-same-tick-batching.md Description: --- title: Understand Reactive Updates are Batched Per Event Loop Tick impact: MEDIUM impactDescription: Multiple synchronous reactive changes are batched - watchers only see the final value, not intermediate states type: gotcha tags: [vue3, reactivity, batching, event-loop, watchers, nextTick] --- # Understand Reactive Updates are Batched Per Event Loop Tick **Impact: MEDIUM** - Vue batches multiple reactive state changes that happen

Malicious tool definition detected

Tool: reference/ref-value-access.md Description: --- title: Always Use .value When Accessing ref() in JavaScript impact: HIGH impactDescription: Forgetting .value causes silent failures and bugs in reactive state updates type: capability tags: [vue3, reactivity, ref, composition-api] --- # Always Use .value When Accessing ref() in JavaScript **Impact: HIGH** - Forgetting `.value` causes silent failures where state updates don't trigger reactivity, leading to hard-to-debug issues.

Malicious tool definition detected

Tool: reference/refs-in-collections-need-value.md Description: --- title: Refs in Arrays and Collections Require .value impact: MEDIUM impactDescription: Refs inside reactive arrays, Maps, or Sets are NOT auto-unwrapped like in reactive objects type: capability tags: [vue3, reactivity, ref, arrays, collections, unwrapping] --- # Refs in Arrays and Collections Require .value **Impact: MEDIUM** - Unlike when a ref is a property of a reactive object, refs inside reactive arrays, Maps, and Sets are

Malicious tool definition detected

Tool: reference/render-function-avoid-internal-vnode-properties.md Description: --- title: Do Not Rely on Internal VNode Properties impact: MEDIUM impactDescription: Using undocumented vnode properties causes code to break on Vue updates type: gotcha tags: [vue3, render-function, vnode, internal-api] --- # Do Not Rely on Internal VNode Properties **Impact: MEDIUM** - The `VNode` interface contains many internal properties used by Vue's rendering system.

Malicious tool definition detected

Tool: reference/render-function-custom-directives.md Description: --- title: Use withDirectives for Custom Directives in Render Functions impact: LOW impactDescription: Custom directives require special handling with withDirectives helper type: best-practice tags: [vue3, render-function, directives, custom-directive] --- # Use withDirectives for Custom Directives in Render Functions **Impact: LOW** - To apply custom directives to vnodes in render functions, use the `withDirectives` helper.

Malicious tool definition detected

Tool: reference/render-function-event-modifiers.md Description: --- title: Use withModifiers for Event Modifiers in Render Functions impact: MEDIUM impactDescription: Manual modifier implementation is error-prone; use withModifiers helper type: best-practice tags: [vue3, render-function, events, modifiers] --- # Use withModifiers for Event Modifiers in Render Functions **Impact: MEDIUM** - When using render functions, event modifiers like `.stop`, `.prevent`, or `.self` require special handling.

Malicious tool definition detected

Tool: reference/render-function-functional-components.md Description: --- title: Use Functional Components for Stateless Presentational UI impact: LOW impactDescription: Functional components reduce overhead for simple stateless components type: best-practice tags: [vue3, render-function, functional-component, performance] --- # Use Functional Components for Stateless Presentational UI **Impact: LOW** - Functional components are plain functions that return vnodes without component instance overh

Malicious tool definition detected

Tool: reference/render-function-v-for-keys-required.md Description: --- title: Always Include key Props When Rendering Lists in Render Functions impact: HIGH impactDescription: Missing keys cause inefficient re-renders and state bugs in dynamic lists type: best-practice tags: [vue3, render-function, v-for, performance, key] --- # Always Include key Props When Rendering Lists in Render Functions **Impact: HIGH** - Omitting `key` props when rendering lists with `h()` or JSX causes Vue to use an in

Malicious tool definition detected

Tool: reference/render-function-v-model-implementation.md Description: --- title: Implement v-model Correctly in Render Functions impact: MEDIUM impactDescription: Incorrect v-model implementation breaks two-way binding with components type: best-practice tags: [vue3, render-function, v-model, two-way-binding] --- # Implement v-model Correctly in Render Functions **Impact: MEDIUM** - When using `v-model` on components in render functions, you must manually handle both the `modelValue` prop and t

Malicious tool definition detected

Tool: reference/render-function-vnodes-must-be-unique.md Description: --- title: VNodes Must Be Unique in Render Functions impact: HIGH impactDescription: Reusing vnode references causes rendering bugs and unexpected behavior type: gotcha tags: [vue3, render-function, vnode, composition-api] --- # VNodes Must Be Unique in Render Functions **Impact: HIGH** - Reusing the same vnode reference multiple times in a render function tree causes rendering bugs, where only one instance appears or updates

Malicious tool definition detected

Tool: reference/rendering-excessive-rerenders-watch-vs-computed.md Description: --- title: Avoid Excessive Re-renders from Misused Watchers impact: HIGH impactDescription: Using watch instead of computed, or deep watchers unnecessarily, triggers excessive component re-renders type: gotcha tags: [vue3, rendering, performance, watch, computed, reactivity, re-renders] --- # Avoid Excessive Re-renders from Misused Watchers **Impact: HIGH** - Improper use of watchers is a common cause of performance

Malicious tool definition detected

Tool: reference/rendering-prefer-templates-over-render-functions.md Description: --- title: Prefer Templates Over Render Functions for Compiler Optimizations impact: MEDIUM impactDescription: Render functions bypass Vue's compile-time optimizations, resulting in more work during updates type: best-practice tags: [vue3, rendering, performance, templates, render-functions, optimization] --- # Prefer Templates Over Render Functions for Compiler Optimizations **Impact: MEDIUM** - Vue's template comp

Malicious tool definition detected

Tool: reference/rendering-render-function-h-import-vue3.md Description: --- title: Import h Globally in Vue 3 Render Functions impact: HIGH impactDescription: Vue 3 requires explicit h import; using Vue 2 patterns causes runtime errors type: gotcha tags: [vue3, render-function, migration, h, vnode, breaking-change] --- # Import h Globally in Vue 3 Render Functions **Impact: HIGH** - In Vue 2, the `h` function (createElement) was passed as an argument to render functions.

Malicious tool definition detected

Tool: reference/rendering-render-function-return-from-setup.md Description: --- title: Return Render Function from setup(), Not Direct VNodes impact: HIGH impactDescription: Returning a vnode directly from setup makes it static; returning a function enables reactive updates type: gotcha tags: [vue3, render-function, composition-api, setup, reactivity] --- # Return Render Function from setup(), Not Direct VNodes **Impact: HIGH** - When using render functions with the Composition API, you must ret

Malicious tool definition detected

Tool: reference/rendering-render-function-slots-as-functions.md Description: --- title: Pass Slots as Functions in Render Functions, Not Direct Children impact: HIGH impactDescription: Passing slot content incorrectly causes slots to not render or be treated as props type: gotcha tags: [vue3, render-function, slots, children, vnode] --- # Pass Slots as Functions in Render Functions, Not Direct Children **Impact: HIGH** - When creating component vnodes with `h()`, children must be passed as slot

Malicious tool definition detected

Tool: reference/rendering-resolve-component-for-string-names.md Description: --- title: Use resolveComponent for String Component Names in Render Functions impact: HIGH impactDescription: String component names don't work in Vue 3 render functions; causes silent failures or runtime errors type: gotcha tags: [vue3, render-function, components, resolveComponent, migration] --- # Use resolveComponent for String Component Names in Render Functions **Impact: HIGH** - In Vue 2, render functions could

Malicious tool definition detected

Tool: reference/rendering-understand-vdom-block-structure.md Description: --- title: Understand How v-if and v-for Create New VDOM Blocks impact: LOW impactDescription: Vue's block-based optimization means conditional and loop structures create separate optimization boundaries type: concept tags: [vue3, rendering, vdom, v-if, v-for, blocks, internals] --- # Understand How v-if and v-for Create New VDOM Blocks **Impact: LOW** - This is an informational concept about Vue internals.

Malicious tool definition detected

Tool: reference/select-initial-value-ios-bug.md Description: --- title: Select Element iOS Bug - Always Include Disabled Placeholder Option impact: HIGH impactDescription: On iOS, users cannot select the first option if v-model initial value doesn't match any option type: capability tags: [vue3, v-model, forms, select, ios, mobile, accessibility] --- # Select Element iOS Bug - Always Include Disabled Placeholder Option **Impact: HIGH** - When a `<select>` element's v-model initial value doesn't

Malicious tool definition detected

Tool: reference/self-referencing-component-name.md Description: --- title: Self-Referencing Components Use Filename as Implicit Name impact: LOW impactDescription: Understanding this avoids confusion with recursive components type: gotcha tags: [vue3, component-registration, self-reference, recursive-components, sfc] --- # Self-Referencing Components Use Filename as Implicit Name **Impact: LOW** - In Single-File Components (SFC), a component can reference itself in its own template using its fil

Malicious tool definition detected

Tool: reference/sfc-named-exports-forbidden.md Description: --- title: SFC Script Block Must Use Default Export Only impact: HIGH impactDescription: Named exports in SFC script blocks will fail silently or cause build errors - Vue expects exactly one default export type: gotcha tags: [vue3, sfc, export, script-block, composition-api] --- # SFC Script Block Must Use Default Export Only **Impact: HIGH** - Vue Single-File Components expect exactly one default export from the `<script>` block.

Malicious tool definition detected

Tool: reference/sfc-recommended-for-build-projects.md Description: --- title: Use Single-File Components with Build Tools impact: MEDIUM impactDescription: SFCs provide better DX, scoped styles, and tooling support for Vue applications type: efficiency tags: [vue3, sfc, single-file-components, build-tools, vite] --- # Use Single-File Components with Build Tools **Impact: MEDIUM** - Single-File Components (SFCs) are the recommended way to author Vue components when using a build setup.

Malicious tool definition detected

Tool: reference/sfc-scoped-css-child-component-styling.md Description: --- title: Use Deep Selectors for Styling Child Component Elements impact: HIGH impactDescription: Scoped styles cannot target elements inside child components without deep selectors, leading to silently broken styles type: gotcha tags: [vue3, sfc, scoped-css, deep-selector, child-components] --- # Use Deep Selectors for Styling Child Component Elements **Impact: HIGH** - When using scoped CSS in Vue SFCs, styles do not penet

Malicious tool definition detected

Tool: reference/sfc-scoped-css-dynamic-content.md Description: --- title: Scoped CSS Does Not Apply to Dynamically Added Content impact: HIGH impactDescription: Programmatically inserted DOM elements won't receive scoped style data attributes, causing styles to fail silently type: gotcha tags: [vue3, sfc, scoped-css, dynamic-content, v-html] --- # Scoped CSS Does Not Apply to Dynamically Added Content **Impact: HIGH** - Vue's scoped CSS works by adding data attributes to elements at compile time

Malicious tool definition detected

Tool: reference/sfc-scoped-css-performance.md Description: --- title: Use Class Selectors in Scoped CSS for Performance impact: MEDIUM impactDescription: Element selectors in scoped CSS are slower because browsers must check both the element type and data attribute type: efficiency tags: [vue3, sfc, scoped-css, performance, css-selectors] --- # Use Class Selectors in Scoped CSS for Performance **Impact: MEDIUM** - When Vue compiles scoped CSS, it adds attribute selectors to every rule.

Malicious tool definition detected

Tool: reference/sfc-scoped-css-slot-content.md Description: --- title: Scoped CSS Cannot Style Slot Content Directly impact: HIGH impactDescription: Slot content receives the parent component's scope, not the child's, causing styles to fail unexpectedly type: gotcha tags: [vue3, sfc, scoped-css, slots, deep-selector] --- # Scoped CSS Cannot Style Slot Content Directly **Impact: HIGH** - When a parent passes content through a slot, that content receives the parent component's scoped style attribu

Malicious tool definition detected

Tool: reference/sfc-script-setup-reactivity.md Description: --- title: Variables in Script Setup Are Not Reactive by Default impact: HIGH impactDescription: Forgetting to wrap variables with ref() or reactive() causes silent reactivity failures in script setup type: gotcha tags: [vue3, sfc, script-setup, reactivity, ref, composition-api] --- # Variables in Script Setup Are Not Reactive by Default **Impact: HIGH** - Unlike Options API's `data()` which automatically makes properties reactive, vari

Malicious tool definition detected

Tool: reference/sfc-separation-of-concerns-colocate.md Description: --- title: Colocate Template, Script, and Style in SFCs for Maintainability impact: MEDIUM impactDescription: Separating template, logic, and styles into different files reduces component cohesion and maintainability type: best-practice tags: [vue3, sfc, architecture, separation-of-concerns, maintainability] --- # Colocate Template, Script, and Style in SFCs for Maintainability **Impact: MEDIUM** - Vue SFCs are designed to coloc

Malicious tool definition detected

Tool: reference/shallow-ref-for-performance.md Description: --- title: Use shallowRef for Large Objects and External Data impact: MEDIUM impactDescription: Deep reactivity on large objects causes performance overhead - shallowRef only tracks .value changes type: efficiency tags: [vue3, reactivity, shallowRef, performance, optimization] --- # Use shallowRef for Large Objects and External Data **Impact: MEDIUM** - By default, `ref()` makes objects deeply reactive, wrapping all nested properties in

Malicious tool definition detected

Tool: reference/slot-conditional-rendering-with-slots.md Description: --- title: Use $slots to Conditionally Render Slot Wrapper Elements impact: MEDIUM impactDescription: Empty wrapper elements render in DOM when slots have no content, affecting layout and styling type: best-practice tags: [vue3, slots, conditional-rendering, performance, dom-optimization] --- # Use $slots to Conditionally Render Slot Wrapper Elements **Impact: MEDIUM** - When building reusable components with optional slots, w

Malicious tool definition detected

Tool: reference/slot-define-slots-for-typescript.md Description: --- title: Use defineSlots for TypeScript Type Safety impact: MEDIUM impactDescription: Without defineSlots, scoped slot props lack type inference causing potential runtime errors type: best-practice tags: [vue3, slots, typescript, type-safety, defineSlots, vue3.3] --- # Use defineSlots for TypeScript Type Safety **Impact: MEDIUM** - Vue 3.3+ introduced the `defineSlots` macro to add type definitions for slots.

Malicious tool definition detected

Tool: reference/slot-fallback-content-default-values.md Description: --- title: Provide Fallback Content for Slots impact: LOW impactDescription: Components without slot fallbacks may render empty or broken when content is not provided type: best-practice tags: [vue3, slots, fallback-content, component-design, reusability] --- # Provide Fallback Content for Slots **Impact: LOW** - Providing sensible default content inside `<slot>` elements makes components more resilient and user-friendly.

Malicious tool definition detected

Tool: reference/slot-forwarding-to-child-components.md Description: --- title: Forward Slots to Child Components Correctly impact: MEDIUM impactDescription: Wrapper components that don't forward slots break slot functionality for consumers type: best-practice tags: [vue3, slots, component-composition, wrapper-components, slot-forwarding] --- # Forward Slots to Child Components Correctly **Impact: MEDIUM** - When creating wrapper components that enhance or extend other components, you need to for

Malicious tool definition detected

Tool: reference/slot-implicit-default-content.md Description: --- title: Non-Template Content Is Implicitly Default Slot Content impact: LOW impactDescription: Unexpected content placement when mixing named slots with loose content type: gotcha tags: [vue3, slots, named-slots, default-slot, implicit-behavior] --- # Non-Template Content Is Implicitly Default Slot Content **Impact: LOW** - When using named slots, any top-level content not wrapped in a `<template>` tag is automatically treated as d

Malicious tool definition detected

Tool: reference/slot-name-reserved-prop.md Description: --- title: Slot Name is Reserved and Not Included in Slot Props impact: LOW impactDescription: Expecting 'name' in scoped slot props when it's reserved causes confusion type: gotcha tags: [vue3, slots, scoped-slots, reserved-props, naming] --- # Slot Name is Reserved and Not Included in Slot Props **Impact: LOW** - When using scoped slots, the `name` attribute on the `<slot>` element is reserved for identifying the slot.

Malicious tool definition detected

Tool: reference/slot-named-scoped-explicit-default.md Description: --- title: Use Explicit Default Template When Mixing Named and Scoped Slots impact: HIGH impactDescription: Mixing v-slot on component with named slots inside causes ambiguous scope and compilation errors type: gotcha tags: [vue3, slots, scoped-slots, named-slots, compilation-error] --- # Use Explicit Default Template When Mixing Named and Scoped Slots **Impact: HIGH** - When a component uses both the default scoped slot and name

Malicious tool definition detected

Tool: reference/slot-render-scope-parent-only.md Description: --- title: Slot Content Only Has Access to Parent Component Scope impact: HIGH impactDescription: Attempting to access child component data in slot content results in undefined values or errors type: gotcha tags: [vue3, slots, scope, reactivity, common-mistake] --- # Slot Content Only Has Access to Parent Component Scope **Impact: HIGH** - Slot content is compiled in the parent component's scope and cannot access data defined in the c

Malicious tool definition detected

Tool: reference/slot-renderless-components-vs-composables.md Description: --- title: Consider Composables Instead of Renderless Components impact: MEDIUM impactDescription: Renderless slot components add overhead compared to composables for pure logic reuse type: best-practice tags: [vue3, slots, renderless-components, composables, performance, composition-api] --- # Consider Composables Instead of Renderless Components **Impact: MEDIUM** - Renderless components (components that only expose logi

Malicious tool definition detected

Tool: reference/slot-v-slot-on-components-or-templates-only.md Description: --- title: v-slot Can Only Be Used on Components or Template Tags impact: HIGH impactDescription: Using v-slot on HTML elements causes compilation errors type: gotcha tags: [vue3, slots, v-slot, compilation-error, common-mistake] --- # v-slot Can Only Be Used on Components or Template Tags **Impact: HIGH** - The `v-slot` directive (and its shorthand `#`) can only be used on Vue components or `<template>` tags.

Malicious tool definition detected

Tool: reference/ssr-custom-directive-getssrprops.md Description: --- title: Implement getSSRProps for Custom Directives in SSR impact: MEDIUM impactDescription: Custom directives without SSR handling cause hydration mismatches or missing functionality type: best-practice tags: [vue3, ssr, directives, custom-directive, server-side-rendering, nuxt] --- # Implement getSSRProps for Custom Directives in SSR **Impact: MEDIUM** - Custom directives only have access to the DOM on the client side.

Malicious tool definition detected

Tool: reference/ssr-hydration-mismatch-causes.md Description: --- title: Understand and Fix SSR Hydration Mismatches impact: HIGH impactDescription: Hydration mismatches cause visual flickering, performance loss, and broken functionality type: gotcha tags: [vue3, ssr, hydration, debugging, nuxt, server-side-rendering] --- # Understand and Fix SSR Hydration Mismatches **Impact: HIGH** - Hydration mismatches occur when the HTML rendered on the client differs from what the server rendered.

Malicious tool definition detected

Tool: reference/ssr-platform-specific-apis.md Description: --- title: Guard Platform-Specific APIs in Universal SSR Code impact: HIGH impactDescription: Accessing browser-only APIs on server causes crashes; Node.js APIs fail in browser type: gotcha tags: [vue3, ssr, browser-api, nodejs, universal, isomorphic, server-side-rendering] --- # Guard Platform-Specific APIs in Universal SSR Code **Impact: HIGH** - SSR applications run the same code on both server (Node.js) and client (browser).

Malicious tool definition detected

Tool: reference/state-ssr-cross-request-pollution.md Description: --- title: Prevent Cross-Request State Pollution in SSR Applications impact: CRITICAL impactDescription: Singleton stores in SSR share state across all server requests, potentially leaking user data between requests type: gotcha tags: [vue3, ssr, state-management, pinia, vuex, security, server-side-rendering, nuxt] --- # Prevent Cross-Request State Pollution in SSR Applications **Impact: CRITICAL** - In Server-Side Rendering (SSR)

Malicious tool definition detected

Tool: reference/style-binding-camelcase.md Description: # Use camelCase for Style Binding Properties ## Rule When using `:style` bindings in Vue, prefer camelCase property names over kebab-case for consistency with JavaScript object syntax and better IDE support.

Malicious tool definition detected

Tool: reference/suspense-events-for-state-tracking.md Description: # Use Suspense Events for Loading State Tracking ## Rule `<Suspense>` emits three events: `pending`, `resolve`, and `fallback`.

Malicious tool definition detected

Tool: reference/suspense-experimental-api-stability.md Description: # Suspense is Experimental and API May Change ## Rule `<Suspense>` is an experimental feature in Vue 3.

Malicious tool definition detected

Tool: reference/suspense-fallback-not-immediate-on-revert.md Description: # Suspense Fallback Not Immediately Shown on Revert ## Rule When Suspense reverts from resolved to pending state, the fallback content is NOT immediately displayed.

Malicious tool definition detected

Tool: reference/suspense-nested-suspensible-prop.md Description: # Use suspensible Prop for Nested Suspense (Vue 3.3+) ## Rule When nesting `<Suspense>` components, use the `suspensible` prop on the inner Suspense to properly coordinate with the parent Suspense.

Malicious tool definition detected

Tool: reference/suspense-nesting-order-with-router.md Description: # Correct Nesting Order: RouterView, Transition, KeepAlive, Suspense ## Rule When combining `<Suspense>` with `<Transition>`, `<KeepAlive>`, and `<RouterView>`, the nesting order must be: `RouterView` -> `Transition` -> `KeepAlive` -> `Suspense`.

Malicious tool definition detected

Tool: reference/suspense-no-builtin-error-handling.md Description: # Suspense Has No Built-in Error Handling ## Rule `<Suspense>` does not provide error handling via the component itself.

Malicious tool definition detected

Tool: reference/suspense-revert-only-on-root-change.md Description: # Suspense Only Reverts to Pending on Root Node Replacement ## Rule Once resolved, `<Suspense>` only reverts to a pending state if the root node of the `#default` slot is replaced.

Malicious tool definition detected

Tool: reference/suspense-single-child-requirement.md Description: # Suspense Slots Only Allow One Immediate Child ## Rule Both `#default` and `#fallback` slots of `<Suspense>` only allow for one immediate child node.

Malicious tool definition detected

Tool: reference/suspense-ssr-hydration-issues.md Description: # Suspense SSR Hydration Issues and Workarounds ## Rule `<Suspense>` has known issues with SSR hydration, particularly with async components.

Malicious tool definition detected

Tool: reference/tailwind-dynamic-class-generation.md Description: # Tailwind CSS Dynamic Class Generation ## Rule Never construct Tailwind CSS class names dynamically using string concatenation or template literals.

Malicious tool definition detected

Tool: reference/teleport-css-positioning-issues.md Description: --- title: Use Teleport to Avoid CSS Positioning Issues impact: MEDIUM impactDescription: Modals and overlays can break when parent elements have transform, perspective, or filter CSS properties type: best-practice tags: [vue3, teleport, modal, css, z-index, positioning] --- # Use Teleport to Avoid CSS Positioning Issues **Impact: MEDIUM** - CSS `position: fixed` only positions relative to the viewport when no ancestor has `transfor

Malicious tool definition detected

Tool: reference/teleport-disabled-for-responsive.md Description: --- title: Use Teleport disabled Prop for Responsive Design impact: LOW impactDescription: Toggle teleportation conditionally for responsive layouts type: best-practice tags: [vue3, teleport, responsive, mobile] --- # Use Teleport disabled Prop for Responsive Design **Impact: LOW** - The `disabled` prop on `<Teleport>` allows conditional teleportation.

Malicious tool definition detected

Tool: reference/teleport-logical-hierarchy-preserved.md Description: --- title: Teleport Preserves Logical Component Hierarchy impact: LOW impactDescription: Understanding that Teleport only changes DOM structure, not Vue's component tree type: best-practice tags: [vue3, teleport, component-hierarchy, props, events] --- # Teleport Preserves Logical Component Hierarchy **Impact: LOW** - A common misconception is that Teleport breaks the Vue component relationship.

Malicious tool definition detected

Tool: reference/teleport-multiple-to-same-target.md Description: --- title: Multiple Teleports to Same Target Append in Order impact: LOW impactDescription: When multiple Teleport components target the same element, they append in declaration order type: capability tags: [vue3, teleport, modal, order] --- # Multiple Teleports to Same Target Append in Order **Impact: LOW** - Multiple `<Teleport>` components can mount content to the same target element.

Malicious tool definition detected

Tool: reference/teleport-scoped-styles-limitation.md Description: --- title: Scoped Styles May Not Apply to Teleported Content impact: MEDIUM impactDescription: Scoped styles can fail to apply to teleported elements due to data attribute limitations type: gotcha tags: [vue3, teleport, scoped-styles, css] --- # Scoped Styles May Not Apply to Teleported Content **Impact: MEDIUM** - When using scoped styles with Teleport, the styles may not apply correctly to teleported elements.

Malicious tool definition detected

Tool: reference/teleport-ssr-hydration.md Description: --- title: Handle Teleport SSR Hydration Carefully impact: HIGH impactDescription: Teleported content causes hydration mismatches in SSR/SSG applications type: gotcha tags: [vue3, teleport, ssr, nuxt, hydration] --- # Handle Teleport SSR Hydration Carefully **Impact: HIGH** - Teleports require special handling during SSR.

Malicious tool definition detected

Tool: reference/teleport-target-must-exist.md Description: --- title: Teleport Target Must Exist Before Mount impact: HIGH impactDescription: Teleport will fail silently or throw errors if target element doesn't exist when component mounts type: gotcha tags: [vue3, teleport, modal, dom, lifecycle] --- # Teleport Target Must Exist Before Mount **Impact: HIGH** - The teleport `to` target must already exist in the DOM when the `<Teleport>` component is mounted.

Malicious tool definition detected

Tool: reference/template-expressions-restrictions.md Description: --- title: Template Expressions Must Be Single Expressions impact: MEDIUM impactDescription: Using statements instead of expressions in templates causes compilation errors type: capability tags: [vue3, template, expressions, interpolation, syntax] --- # Template Expressions Must Be Single Expressions **Impact: MEDIUM** - Vue templates only support single JavaScript expressions, not statements.

Malicious tool definition detected

Tool: reference/template-functions-no-side-effects.md Description: --- title: Template Functions Must Be Pure Without Side Effects impact: MEDIUM impactDescription: Functions with side effects in templates cause unpredictable behavior on every re-render type: efficiency tags: [vue3, template, functions, performance, side-effects] --- # Template Functions Must Be Pure Without Side Effects **Impact: MEDIUM** - Functions called in templates execute on every component re-render.

Malicious tool definition detected

Tool: reference/template-ref-null-with-v-if.md Description: --- title: Template Refs Become Null When Elements Are Unmounted impact: MEDIUM impactDescription: Refs become null when conditionally rendered elements are removed, causing errors if not handled type: gotcha tags: [vue3, template-refs, v-if, watchers, conditional-rendering] --- # Template Refs Become Null When Elements Are Unmounted **Impact: MEDIUM** - When using template refs with `v-if`, the ref becomes `null` when the element is un

Malicious tool definition detected

Tool: reference/template-ref-unwrapping-top-level.md Description: --- title: Template Ref Unwrapping Only Works for Top-Level Properties impact: MEDIUM impactDescription: Nested refs in template expressions render as [object Object] instead of their values type: capability tags: [vue3, reactivity, ref, template, unwrapping] --- # Template Ref Unwrapping Only Works for Top-Level Properties **Impact: MEDIUM** - Vue only auto-unwraps refs that are top-level properties in the template render context

Malicious tool definition detected

Tool: reference/template-ref-v-for-order.md Description: --- title: Template Ref Array Order Not Guaranteed in v-for impact: MEDIUM impactDescription: Refs collected from v-for may not match source array order, causing index-based bugs type: gotcha tags: [vue3, template-refs, v-for, arrays, ordering] --- # Template Ref Array Order Not Guaranteed in v-for **Impact: MEDIUM** - When using template refs inside `v-for`, Vue collects the element references into an array.

Malicious tool definition detected

Tool: reference/textarea-no-interpolation.md Description: --- title: Textarea Interpolation is One-Way Only - Use v-model for Two-Way Binding impact: HIGH impactDescription: Using {{ text }} inside textarea displays initial value but user input does NOT update the ref type: capability tags: [vue3, v-model, forms, textarea, interpolation, template] --- # Textarea Interpolation is One-Way Only - Use v-model for Two-Way Binding **Impact: HIGH** - Interpolation in textarea (`{{ text }}`) provides on

Malicious tool definition detected

Tool: reference/transition-animate-transform-opacity.md Description: --- title: Prefer Animating Transform and Opacity for Performance impact: MEDIUM impactDescription: Animating layout-triggering properties like height or margin causes expensive reflows and janky animations type: best-practice tags: [vue3, transition, animation, performance, css, transform, opacity] --- # Prefer Animating Transform and Opacity for Performance **Impact: MEDIUM** - When creating Vue transitions, you should prefer

Malicious tool definition detected

Tool: reference/transition-group-flip-inline-elements.md Description: --- title: TransitionGroup FLIP Animations Do Not Work With Inline Elements impact: MEDIUM impactDescription: Move animations silently fail on inline elements, causing items to jump type: gotcha tags: [vue3, transition-group, animation, flip, css, display, inline-block] --- # TransitionGroup FLIP Animations Do Not Work With Inline Elements **Impact: MEDIUM** - The FLIP (First, Last, Invert, Play) animation technique that Vue u

Malicious tool definition detected

Tool: reference/transition-group-key-requirement.md Description: --- title: TransitionGroup Children Must Have Unique Keys impact: HIGH impactDescription: Missing or non-unique keys cause broken animations and Vue warnings type: gotcha tags: [vue3, transition-group, animation, key, v-for, list-animation] --- # TransitionGroup Children Must Have Unique Keys **Impact: HIGH** - Unlike regular `<Transition>`, the `<TransitionGroup>` component **always requires** a unique `key` attribute on every chi

Malicious tool definition detected

Tool: reference/transition-group-move-animation-position-absolute.md Description: --- title: TransitionGroup Move Animation Requires Position Absolute on Leaving Items impact: HIGH impactDescription: Without position absolute, surrounding items jump instead of smoothly animating type: gotcha tags: [vue3, transition-group, animation, move-transition, css, list-animation] --- # TransitionGroup Move Animation Requires Position Absolute on Leaving Items **Impact: HIGH** - When items are added or rem

Malicious tool definition detected

Tool: reference/transition-group-no-default-wrapper-vue3.md Description: --- title: TransitionGroup No Longer Renders Default Wrapper Element in Vue 3 impact: MEDIUM impactDescription: Vue 2 to Vue 3 migration may break layouts relying on the default span wrapper type: gotcha tags: [vue3, transition-group, migration, vue2, breaking-change, wrapper-element] --- # TransitionGroup No Longer Renders Default Wrapper Element in Vue 3 **Impact: MEDIUM** - In Vue 2, `<transition-group>` always rendered

Malicious tool definition detected

Tool: reference/transition-group-no-mode-prop.md Description: --- title: TransitionGroup Does Not Support Transition Modes impact: LOW impactDescription: Developers expecting mode prop from Transition will find it doesn't work type: gotcha tags: [vue3, transition-group, animation, mode, in-out, out-in] --- # TransitionGroup Does Not Support Transition Modes **Impact: LOW** - Unlike `<Transition>`, the `<TransitionGroup>` component does not support the `mode` prop (`in-out` or `out-in`).

Malicious tool definition detected

Tool: reference/transition-group-staggered-animations.md Description: --- title: Use Data Attributes for Staggered List Animations in TransitionGroup impact: LOW impactDescription: Best practice for creating polished staggered animation effects type: best-practice tags: [vue3, transition-group, animation, stagger, javascript-hooks, gsap] --- # Use Data Attributes for Staggered List Animations in TransitionGroup **Impact: LOW** - When creating staggered list animations where items animate in sequ

Malicious tool definition detected

Tool: reference/transition-js-hooks-done-callback.md Description: --- title: JavaScript Transition Hooks Require done() Callback with css="false" impact: HIGH impactDescription: Without calling done(), JavaScript-only transitions complete immediately, skipping the animation entirely type: gotcha tags: [vue3, transition, javascript, animation, hooks, gsap, done-callback] --- # JavaScript Transition Hooks Require done() Callback with css="false" **Impact: HIGH** - When using JavaScript-only transi

Malicious tool definition detected

Tool: reference/transition-key-for-same-element.md Description: --- title: Use Key Attribute to Force Transition on Same Element Type impact: HIGH impactDescription: Without a key, Vue reuses the same DOM element and no transition occurs when only the content changes type: gotcha tags: [vue3, transition, key, animation, dom-reuse] --- # Use Key Attribute to Force Transition on Same Element Type **Impact: HIGH** - When transitioning between elements of the same type (e.g., two `<span>` elements o

Malicious tool definition detected

Tool: reference/transition-mode-out-in.md Description: --- title: Use mode="out-in" for Sequential Element Transitions impact: MEDIUM impactDescription: Without transition mode, entering and leaving elements animate simultaneously, causing overlap and layout issues type: best-practice tags: [vue3, transition, animation, mode, out-in, in-out] --- # Use mode="out-in" for Sequential Element Transitions **Impact: MEDIUM** - By default, Vue's `<Transition>` runs enter and leave animations simultaneou

Malicious tool definition detected

Tool: reference/transition-nested-duration.md Description: --- title: Specify Explicit Duration for Nested Transitions impact: MEDIUM impactDescription: Nested transitions with different timings may end prematurely when Vue detects only the root element's transition end type: gotcha tags: [vue3, transition, animation, duration, nested, timing] --- # Specify Explicit Duration for Nested Transitions **Impact: MEDIUM** - When transitioning elements that contain nested child elements with different

Malicious tool definition detected

Tool: reference/transition-reusable-scoped-style.md Description: --- title: Avoid Scoped Styles in Reusable Transition Components impact: MEDIUM impactDescription: Scoped styles in transition wrapper components won't apply to slotted content, breaking the transition animation type: gotcha tags: [vue3, transition, scoped-css, slot, reusable-component] --- # Avoid Scoped Styles in Reusable Transition Components **Impact: MEDIUM** - When creating reusable transition wrapper components, using `<styl

Malicious tool definition detected

Tool: reference/transition-router-view-appear.md Description: --- title: RouterView Transitions Always Apply Despite Missing appear Prop impact: LOW impactDescription: Initial page load with RouterView triggers transition animation even without the appear prop due to async navigation type: gotcha tags: [vue3, transition, vue-router, appear, initial-load, navigation] --- # RouterView Transitions Always Apply Despite Missing appear Prop **Impact: LOW** - When using `<Transition>` with Vue Router's

Malicious tool definition detected

Tool: reference/transition-single-element-slot.md Description: --- title: Transition Only Supports Single Element or Component as Slot Content impact: HIGH impactDescription: Using multiple elements inside Transition causes the transition to fail silently or produce unexpected results type: gotcha tags: [vue3, transition, animation, slot, single-element] --- # Transition Only Supports Single Element or Component as Slot Content **Impact: HIGH** - The `<Transition>` component can only wrap a sing

Malicious tool definition detected

Tool: reference/transition-type-when-mixed.md Description: --- title: Specify Transition Type When Mixing CSS Transitions and Animations impact: MEDIUM impactDescription: Vue may detect the wrong transition end event when both CSS transitions and animations are applied, causing timing issues type: gotcha tags: [vue3, transition, animation, css, type, timing] --- # Specify Transition Type When Mixing CSS Transitions and Animations **Impact: MEDIUM** - When you have both CSS transitions and CSS an

Malicious tool definition detected

Tool: reference/transition-unmount-hook-timing.md Description: --- title: Unmount Hooks May Not Fire Inside Transitions During Fast Replacement impact: MEDIUM impactDescription: Components inside transitions can be destroyed without unmount hooks firing under race conditions type: gotcha tags: [vue3, lifecycle, transition, onUnmounted, unmounted, cleanup, race-condition] --- # Unmount Hooks May Not Fire Inside Transitions During Fast Replacement **Impact: MEDIUM** - When a component inside a `<t

Malicious tool definition detected

Tool: reference/ts-component-ref-typeof-instancetype.md Description: --- title: Use InstanceType for Component Ref Types impact: MEDIUM impactDescription: Without proper typing, component refs lose type information for exposed methods and properties type: best-practice tags: [vue3, typescript, template-refs, component-refs, InstanceType] --- # Use InstanceType for Component Ref Types **Impact: MEDIUM** - When creating refs to child Vue components, use `InstanceType<typeof Component>` to properly

Malicious tool definition detected

Tool: reference/ts-custom-directive-type-augmentation.md Description: --- title: Type Custom Directives with Module Augmentation impact: LOW impactDescription: Without type augmentation, custom directives in templates lack TypeScript support type: best-practice tags: [vue3, typescript, directives, module-augmentation, ComponentCustomProperties] --- # Type Custom Directives with Module Augmentation **Impact: LOW** - To get TypeScript support for custom directives in templates, you must augment Vu

Malicious tool definition detected

Tool: reference/ts-defineemits-type-based-syntax.md Description: --- title: Use Type-Based defineEmits for Better TypeScript Support impact: MEDIUM impactDescription: Type-based emit declarations provide fine-grained type checking for event payloads type: best-practice tags: [vue3, typescript, emits, defineEmits, composition-api, vue3.3] --- # Use Type-Based defineEmits for Better TypeScript Support **Impact: MEDIUM** - Vue 3.3+ introduced a more concise type-based syntax for `defineEmits` using

Malicious tool definition detected

Tool: reference/ts-defineprops-boolean-default-false.md Description: --- title: Boolean Props Default to false, Not undefined impact: MEDIUM impactDescription: TypeScript expects optional boolean to be undefined but Vue defaults it to false, causing type confusion type: gotcha tags: [vue3, typescript, props, boolean, defineProps] --- # Boolean Props Default to false, Not undefined **Impact: MEDIUM** - When using type-based `defineProps`, optional boolean props (marked with `?`) behave differentl

Malicious tool definition detected

Tool: reference/ts-defineprops-imported-types-limitations.md Description: --- title: Imported Types Have Limitations in defineProps impact: MEDIUM impactDescription: Complex imported types like conditional types can cause compiler errors in defineProps type: gotcha tags: [vue3, typescript, defineProps, imported-types, vue3.3] --- # Imported Types Have Limitations in defineProps **Impact: MEDIUM** - While Vue 3.3+ supports imported types in `defineProps<>()`, certain complex types are not fully s

Malicious tool definition detected

Tool: reference/ts-defineprops-type-based-declaration.md Description: --- title: Prefer Type-Based defineProps Declaration impact: MEDIUM impactDescription: Type-based declaration provides better TypeScript integration and cleaner syntax type: best-practice tags: [vue3, typescript, props, defineProps, composition-api] --- # Prefer Type-Based defineProps Declaration **Impact: MEDIUM** - Vue 3 supports two ways to declare props with TypeScript: runtime declaration and type-based declaration.

Malicious tool definition detected

Tool: reference/ts-event-handler-explicit-typing.md Description: --- title: Always Explicitly Type Event Handlers impact: MEDIUM impactDescription: Without explicit typing, event parameters have implicit 'any' type causing TypeScript errors in strict mode type: gotcha tags: [vue3, typescript, events, dom-events, composition-api] --- # Always Explicitly Type Event Handlers **Impact: MEDIUM** - Native DOM event handlers in Vue components have implicit `any` type for the `event` parameter.

Malicious tool definition detected

Tool: reference/ts-provide-inject-injection-key.md Description: --- title: Use InjectionKey for Type-Safe Provide/Inject impact: MEDIUM impactDescription: Without InjectionKey, injected values are typed as unknown requiring manual type assertions type: best-practice tags: [vue3, typescript, provide-inject, injection-key, composition-api] --- # Use InjectionKey for Type-Safe Provide/Inject **Impact: MEDIUM** - When using `provide/inject` with TypeScript, use `InjectionKey<T>` with Symbol to achie

Malicious tool definition detected

Tool: reference/ts-reactive-no-generic-argument.md Description: --- title: Do Not Use Generic Argument with reactive() impact: MEDIUM impactDescription: The generic argument type differs from the actual return type due to ref unwrapping, causing type mismatches type: gotcha tags: [vue3, typescript, reactive, ref-unwrapping, composition-api] --- # Do Not Use Generic Argument with reactive() **Impact: MEDIUM** - It is NOT recommended to use the generic argument of `reactive()` because the returned

Malicious tool definition detected

Tool: reference/ts-shallowref-for-dynamic-components.md Description: --- title: Use shallowRef for Dynamic Component References impact: MEDIUM impactDescription: Storing components in reactive() or ref() triggers Vue warnings and can cause performance issues type: gotcha tags: [typescript, shallowRef, dynamic-components, reactivity, performance] --- # Use shallowRef for Dynamic Component References **Impact: MEDIUM** - When storing Vue components in reactive state for dynamic rendering, using `r

Malicious tool definition detected

Tool: reference/ts-template-ref-null-handling.md Description: --- title: Template Refs Are Null Until Mounted impact: HIGH impactDescription: Accessing template ref before mount or after unmount causes runtime errors type: gotcha tags: [vue3, typescript, template-refs, lifecycle, null-safety] --- # Template Refs Are Null Until Mounted **Impact: HIGH** - Template refs have an initial value of `null` and remain null until the component mounts.

Malicious tool definition detected

Tool: reference/ts-template-type-casting.md Description: --- title: Use Type Casting in Templates for Union Types impact: MEDIUM impactDescription: Template expressions with union types cause TypeScript errors even when the runtime type is known type: gotcha tags: [typescript, templates, type-casting, union-types, script-setup] --- # Use Type Casting in Templates for Union Types **Impact: MEDIUM** - When using `lang="ts"` in Vue Single File Components, template expressions get strict type checki

Malicious tool definition detected

Tool: reference/ts-withdefaults-mutable-factory-function.md Description: --- title: Wrap Mutable Default Values in Factory Functions impact: HIGH impactDescription: Without factory functions, all component instances share the same mutable reference causing cross-contamination bugs type: gotcha tags: [vue3, typescript, props, withDefaults, mutable-types] --- # Wrap Mutable Default Values in Factory Functions **Impact: HIGH** - When using `withDefaults()` with type-based props declaration, default

Malicious tool definition detected

Tool: reference/undeclared-emits-double-firing.md Description: --- title: Undeclared Emits Cause Double Event Firing impact: HIGH impactDescription: Native events re-emitted without declaration fire twice - once from emit() and once from native listener on root element type: gotcha tags: [vue3, emits, defineEmits, events, native-events, fallthrough] --- # Undeclared Emits Cause Double Event Firing **Impact: HIGH** - When a component re-emits a native DOM event (like `click`) without declaring it

Malicious tool definition detected

Tool: reference/updated-hook-performance.md Description: --- title: Avoid Expensive Operations in Updated Hook impact: MEDIUM impactDescription: Heavy computations in updated hook cause performance bottlenecks and potential infinite loops type: capability tags: [vue3, vue2, lifecycle, updated, performance, optimization, reactivity] --- # Avoid Expensive Operations in Updated Hook **Impact: MEDIUM** - The `updated` hook runs after every reactive state change that causes a re-render.

Malicious tool definition detected

Tool: reference/use-template-ref-vue35.md Description: --- title: Use useTemplateRef for Template Refs in Vue 3.5+ impact: MEDIUM impactDescription: Legacy ref pattern is error-prone due to name matching requirement type: best-practice tags: [vue3, vue35, template-refs, useTemplateRef, composition-api] --- # Use useTemplateRef for Template Refs in Vue 3.5+ **Impact: MEDIUM** - Before Vue 3.5, template refs required declaring a `ref()` with a name exactly matching the template's ref attribute.

Malicious tool definition detected

Tool: reference/v-else-must-follow-v-if.md Description: --- title: v-else Must Immediately Follow v-if or v-else-if impact: MEDIUM impactDescription: Misplaced v-else causes a compile-time error in SFCs, or renders unconditionally with runtime template compilation type: capability tags: [vue3, conditional-rendering, v-if, v-else, v-else-if] --- # v-else Must Immediately Follow v-if or v-else-if **Impact: MEDIUM** - A `v-else` or `v-else-if` element must immediately follow a `v-if` or `v-else-if`

Malicious tool definition detected

Tool: reference/v-for-component-props.md Description: --- title: Always Pass v-for Data to Components via Props impact: MEDIUM impactDescription: Components have isolated scope - v-for iteration data is not automatically available inside child components type: gotcha tags: [vue3, v-for, components, props, list-rendering] --- # Always Pass v-for Data to Components via Props **Impact: MEDIUM** - Vue components have isolated scope by design.

Malicious tool definition detected

Tool: reference/v-for-computed-reverse-sort.md Description: --- title: Copy Arrays Before reverse() or sort() in Computed Properties impact: MEDIUM impactDescription: reverse() and sort() mutate the original array, causing unintended side effects in computed getters type: gotcha tags: [vue3, v-for, computed, array, mutation, list-rendering] --- # Copy Arrays Before reverse() or sort() in Computed Properties **Impact: MEDIUM** - The `reverse()` and `sort()` methods mutate the original array in-pl

Malicious tool definition detected

Tool: reference/v-for-key-attribute.md Description: --- title: Always Provide Unique Keys in v-for Loops impact: HIGH impactDescription: Missing or improper keys cause hard-to-debug bugs when list items have state, components, or animations type: gotcha tags: [vue3, v-for, list-rendering, key, state, components] --- # Always Provide Unique Keys in v-for Loops **Impact: HIGH** - Without proper keys, Vue cannot track element identity when lists change.

Malicious tool definition detected

Tool: reference/v-for-range-starts-at-one.md Description: --- title: v-for Range Iteration Starts at 1, Not 0 impact: LOW impactDescription: v-for with a number range starts at 1, unlike JavaScript arrays which start at 0 type: gotcha tags: [vue3, v-for, list-rendering, range] --- # v-for Range Iteration Starts at 1, Not 0 **Impact: LOW** - When using `v-for` with a number (range iteration), the iteration starts at `1`, not `0`.

Malicious tool definition detected

Tool: reference/v-for-use-computed-for-filtering.md Description: --- title: Use Computed Properties for Filtering and Sorting Lists impact: MEDIUM impactDescription: Computed properties cache results and only recalculate when dependencies change - methods recalculate on every render type: best-practice tags: [vue3, v-for, computed, performance, list-rendering] --- # Use Computed Properties for Filtering and Sorting Lists **Impact: MEDIUM** - When displaying filtered or sorted versions of arrays,

Malicious tool definition detected

Tool: reference/v-html-xss-security.md Description: --- title: Never Use v-html with User-Provided Content impact: HIGH impactDescription: Using v-html with untrusted content leads to XSS vulnerabilities type: capability tags: [vue3, security, xss, v-html, template] --- # Never Use v-html with User-Provided Content **Impact: HIGH** - Dynamically rendering arbitrary HTML with `v-html` can lead to Cross-Site Scripting (XSS) vulnerabilities.

Malicious tool definition detected

Tool: reference/v-if-null-check-order.md Description: --- title: Check for Null/Undefined Before Accessing Properties in v-if impact: MEDIUM impactDescription: Accessing properties on null/undefined causes runtime errors and crashes type: capability tags: [vue3, conditional-rendering, v-if, null-check, defensive-programming] --- # Check for Null/Undefined Before Accessing Properties in v-if **Impact: MEDIUM** - Accessing properties on null or undefined objects in `v-if` conditions causes "Cannot

Malicious tool definition detected

Tool: reference/v-if-vs-v-show-performance.md Description: --- title: Choose v-if or v-show Based on Toggle Frequency impact: MEDIUM impactDescription: Wrong choice causes unnecessary DOM operations or wasted initial render cost type: capability tags: [vue3, conditional-rendering, v-if, v-show, performance] --- # Choose v-if or v-show Based on Toggle Frequency **Impact: MEDIUM** - Using the wrong directive for your use case leads to suboptimal performance.

Malicious tool definition detected

Tool: reference/v-model-ignores-html-attributes.md Description: --- title: v-model Ignores Initial HTML Attributes impact: HIGH impactDescription: v-model ignores value, checked, and selected HTML attributes - initial state must be set in JavaScript type: capability tags: [vue3, v-model, forms, input, checkbox, select, initialization] --- # v-model Ignores Initial HTML Attributes **Impact: HIGH** - Setting initial values via HTML `value`, `checked`, or `selected` attributes has no effect when us

Malicious tool definition detected

Tool: reference/v-model-ime-composition.md Description: --- title: v-model Does Not Update During IME Composition impact: MEDIUM impactDescription: v-model won't capture intermediate input for Chinese, Japanese, Korean and other IME languages type: capability tags: [vue3, v-model, forms, input, ime, internationalization, i18n, cjk] --- # v-model Does Not Update During IME Composition **Impact: MEDIUM** - When users type in languages that require an Input Method Editor (Chinese, Japanese, Korean,

Malicious tool definition detected

Tool: reference/v-model-number-modifier-behavior.md Description: --- title: v-model.number Uses parseFloat Not valueAsNumber impact: MEDIUM impactDescription: .number modifier returns empty string for empty input and uses parseFloat, not native valueAsNumber type: capability tags: [vue3, v-model, forms, input, number, type-coercion, modifiers] --- # v-model.number Uses parseFloat Not valueAsNumber **Impact: MEDIUM** - The `.number` modifier doesn't behave like the native `valueAsNumber` property

Malicious tool definition detected

Tool: reference/v-model-vue3-breaking-changes.md Description: --- title: v-model Breaking Changes from Vue 2 to Vue 3 impact: HIGH impactDescription: Vue 3 changed v-model prop/event names and removed .sync modifier - migration required type: migration tags: [vue3, vue2, v-model, migration, breaking-changes, sync] --- # v-model Breaking Changes from Vue 2 to Vue 3 **Impact: HIGH** - Vue 3 fundamentally changed how v-model works on custom components.

Malicious tool definition detected

Tool: reference/v-show-template-limitation.md Description: --- title: v-show Does Not Work on template or With v-else impact: MEDIUM impactDescription: Using v-show on template silently fails, element is always rendered type: capability tags: [vue3, conditional-rendering, v-show, template, limitations] --- # v-show Does Not Work on template or With v-else **Impact: MEDIUM** - `v-show` cannot be used on `<template>` elements because templates don't render to the DOM (so there's nothing to apply `

Malicious tool definition detected

Tool: reference/watch-async-cleanup.md Description: --- title: Clean Up Async Operations in Watchers to Prevent Race Conditions impact: HIGH impactDescription: Stale async requests can overwrite newer data, causing incorrect UI state and hard-to-debug issues type: capability tags: [vue3, watch, watchers, async, cleanup, race-condition, abort] --- # Clean Up Async Operations in Watchers to Prevent Race Conditions **Impact: HIGH** - When a watched value changes rapidly, multiple async operations r

Malicious tool definition detected

Tool: reference/watch-async-creation-memory-leak.md Description: --- title: Watchers Created Asynchronously Must Be Manually Stopped impact: HIGH impactDescription: Async-created watchers are not bound to component lifecycle and cause memory leaks type: capability tags: [vue3, watch, watchers, async, memory-leak, lifecycle, cleanup] --- # Watchers Created Asynchronously Must Be Manually Stopped **Impact: HIGH** - Watchers created inside async callbacks (setTimeout, Promise.then, async/await) are

Malicious tool definition detected

Tool: reference/watch-deep-performance.md Description: --- title: Avoid Deep Watchers on Large Data Structures impact: HIGH impactDescription: Deep watchers traverse all nested properties on every change, causing severe performance degradation type: efficiency tags: [vue3, watch, watchers, deep, performance, optimization] --- # Avoid Deep Watchers on Large Data Structures **Impact: HIGH** - Deep watchers must traverse all nested properties in the watched object on every mutation.

Malicious tool definition detected

Tool: reference/watch-deep-same-object-reference.md Description: --- title: Deep Watch Callback Receives Same Object Reference for Old and New Values impact: MEDIUM impactDescription: Comparing oldValue and newValue in deep watchers is misleading since they reference the same object type: capability tags: [vue3, watch, watchers, deep, oldValue, newValue, object-reference] --- # Deep Watch Callback Receives Same Object Reference for Old and New Values **Impact: MEDIUM** - When using deep watchers

Malicious tool definition detected

Tool: reference/watch-flush-timing.md Description: --- title: Use flush post When Accessing Updated DOM in Watchers impact: MEDIUM impactDescription: Default watcher timing runs before DOM updates, causing stale DOM reads type: capability tags: [vue3, watch, watchers, flush, DOM, timing, post] --- # Use flush: 'post' When Accessing Updated DOM in Watchers **Impact: MEDIUM** - By default, watcher callbacks run before the component's DOM is updated.

Malicious tool definition detected

Tool: reference/watch-immediate-option.md Description: --- title: Use immediate Option Instead of Duplicate Initial Call impact: LOW impactDescription: Duplicate code for initial call and watch callback reduces maintainability type: efficiency tags: [vue3, watch, watchers, immediate, best-practices, DRY] --- # Use immediate Option Instead of Duplicate Initial Call **Impact: LOW** - Calling a function manually at setup and also in a watcher leads to duplicate code.

Malicious tool definition detected

Tool: reference/watch-reactive-property-getter.md Description: --- title: Use Getter Function When Watching Reactive Object Properties impact: HIGH impactDescription: Watching reactive properties directly passes a primitive value, causing the watcher to never trigger type: capability tags: [vue3, watch, watchers, reactive, getter, common-mistake] --- # Use Getter Function When Watching Reactive Object Properties **Impact: HIGH** - Directly watching a property of a reactive object passes a primit

Malicious tool definition detected

Tool: reference/watch-vs-watcheffect.md Description: --- title: Choose watch vs watchEffect Based on Dependency Control Needs impact: MEDIUM impactDescription: Wrong choice leads to unnecessary re-runs or missed dependency tracking type: efficiency tags: [vue3, watch, watchEffect, watchers, reactivity, best-practices] --- # Choose watch vs watchEffect Based on Dependency Control Needs **Impact: MEDIUM** - Using `watch` when `watchEffect` would be cleaner leads to repetitive code.

Malicious tool definition detected

Tool: reference/watcheffect-async-dependency-tracking.md Description: --- title: watchEffect Only Tracks Dependencies Before First Await impact: HIGH impactDescription: Dependencies accessed after await are not tracked, causing watchers to miss reactive changes type: capability tags: [vue3, watchEffect, watchers, async, await, dependency-tracking] --- # watchEffect Only Tracks Dependencies Before First Await **Impact: HIGH** - `watchEffect` automatically tracks reactive dependencies, but only du

Malicious tool definition detected

Tool: reference/watcheffect-flush-post-for-refs.md Description: --- title: Use flush post for watchEffect with Template Refs impact: MEDIUM impactDescription: Default watchEffect runs before DOM updates, causing refs to be out of sync type: gotcha tags: [vue3, watchEffect, template-refs, flush, dom-timing] --- # Use flush post for watchEffect with Template Refs **Impact: MEDIUM** - By default, `watchEffect` runs before the DOM is updated.

Tool passed security scan