Vue Debug Guides
Fix Vue 3 list and route transitions where animation libraries never fire because Vue reuses DOM nodes in place.
Overview
vue-debug-guides is an agent skill for the Build phase that teaches Vue 3 :key patterns so AutoAnimate and route transitions detect changes instead of silently reusing DOM nodes.
Install
npx skills add https://github.com/vuejs-ai/skills --skill vue-debug-guidesWhat is this skill?
- Explains why DOM reuse blocks AutoAnimate and similar libs from detecting content changes
- Task checklist: add :key on animating children, avoid index keys, key router-view on fullPath
- Contrasts problematic vs fixed patterns for text, images, and routed views under v-auto-animate
- Tagged gotcha with MEDIUM impact for vue3, animation, key, autoanimate, rerender, dom
- 4-item task checklist for key and v-auto-animate setup
Adoption & trust: 7k installs on skills.sh; 2.5k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Vue UI updates text, images, or routes but animation directives never run because elements are patched in place.
Who is it for?
Indie builders adding AutoAnimate or route transitions to Vue 3 apps who see static updates with no motion.
Skip if: Teams on non-Vue stacks or apps that intentionally avoid list/route animations and do not use v-auto-animate.
When should I use this skill?
Vue 3 animations fail on content or route changes and you suspect DOM reuse without :key.
What do I get? / Deliverables
Keyed children and router-view force proper teardown and mount so parent v-auto-animate hooks fire on real DOM changes.
- Keyed template patterns for lists, media, and router-view
- Correct v-auto-animate parent/child structure
Recommended Skills
Journey fit
Canonical shelf is Build because the skill addresses Vue template and router-view patterns during UI implementation, not deployment or growth work. Frontend subphase fits keyed re-renders, v-auto-animate parent wiring, and router-view keys tied to $route.fullPath.
How it compares
Use this targeted DOM-reuse fix instead of generic CSS animation tutorials that ignore Vue’s reconciliation behavior.
Common Questions / FAQ
Who is vue-debug-guides for?
Solo and indie frontend devs shipping Vue 3 SPAs who use animation helpers like AutoAnimate and need keys wired correctly on lists and router-view.
When should I use vue-debug-guides?
During Build when list items, messages, images, or route changes should animate but only the content updates with no transition.
Is vue-debug-guides safe to install?
It is documentation-style guidance with no runtime hooks; review the Security Audits panel on this page before adding any skill from the catalog.
SKILL.md
READMESKILL.md - Vue Debug Guides
# Use Key Attribute to Force Re-render Animations **Impact: MEDIUM** - Vue optimizes performance by reusing DOM elements when possible. However, this optimization can prevent animation libraries (like AutoAnimate) from detecting changes, because the element is updated in place rather than re-created. Adding a `:key` attribute forces Vue to treat changed elements as new, triggering proper animations. ## Task Checklist - [ ] Add `:key` to elements that should animate when their content changes - [ ] Use unique, changing values for keys (not indices) - [ ] For route transitions, add `:key="$route.fullPath"` to `<router-view>` - [ ] Apply `v-auto-animate` to the parent element of keyed children **Problematic Code:** ```vue <template> <!-- BAD: Text changes but no animation occurs --> <div v-auto-animate> <p>{{ message }}</p> <!-- No key - element is reused --> </div> <!-- BAD: Image source changes but no animation --> <div v-auto-animate> <img :src="imageUrl" /> <!-- No key - element is reused --> </div> <!-- BAD: Route changes don't animate --> <router-view v-auto-animate /> <!-- No key --> </template> <script setup> import { ref } from 'vue' const message = ref('Hello') const imageUrl = ref('/images/photo1.jpg') // Changing these won't trigger animations because // Vue updates the existing elements rather than replacing them </script> ``` **Correct Code:** ```vue <template> <!-- GOOD: Key forces re-render, triggering animation --> <div v-auto-animate> <p :key="message">{{ message }}</p> </div> <!-- GOOD: Image animates when source changes --> <div v-auto-animate> <img :key="imageUrl" :src="imageUrl" /> </div> <!-- GOOD: Route changes animate properly --> <router-view :key="$route.fullPath" v-auto-animate /> </template> <script setup> import { ref } from 'vue' const message = ref('Hello') const imageUrl = ref('/images/photo1.jpg') // Now changing these will trigger animations function updateMessage() { message.value = 'World' // Triggers enter animation for new <p> } </script> ``` ## Why This Works When Vue sees a `:key` change: 1. It considers the old element and new element as different 2. The old element is removed (triggering leave animation) 3. A new element is created (triggering enter animation) Without `:key`: 1. Vue sees the same element type in the same position 2. It updates the element's properties in place 3. No DOM addition/removal occurs, so no animation triggers ## Common Use Cases ### Animating Text Content Changes ```vue <template> <div v-auto-animate> <h1 :key="title">{{ title }}</h1> <p :key="description">{{ description }}</p> </div> </template> ``` ### Animating Dynamic Components ```vue <template> <div v-auto-animate> <component :is="currentComponent" :key="currentComponent" /> </div> </template> ``` ### Animating Route Transitions ```vue <template> <router-view v-slot="{ Component, route }"> <div v-auto-animate> <component :is="Component" :key="route.fullPath" /> </div> </router-view> </template> ``` ## With Vue's Built-in Transition The same principle applies to Vue's `<Transition>` component: ```vue <template> <!-- GOOD: Key triggers transition on content change --> <Transition name="fade" mode="out-in"> <p :key="message">{{ message }}</p> </Transition> <!-- GOOD: Different keys for conditional content --> <Transition name="fade" mode="out-in"> <div v-if="isLoading" key="loading">Loading...</div> <div v-else key="content">{{ content }}</div> </Transition> </template> ``` ## Caution: Performance Implications Using `:key` forces full component re-creation. For frequently changin