[Vue warn]: <TransitionGroup> children must be keyed Vue Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Vue: [Vue warn]: <TransitionGroup> children must be keyed: <li>

Children of <TransitionGroup> lack a unique key, so animations can't track items.

Exact message you may see [Vue warn]: <TransitionGroup> children must be keyed: <li>TransitionGroup children must be keyed<transition-group> children must be keyed[Vue warn]: <TransitionGroup> children must be keyed: <div>
Explore the map of this error Full error map →
Seen on: Vue

Meaning

Add :key with a stable unique value to each direct child (not the index if items reorder). v-for inside <TransitionGroup> needs keys; also set tag if you want a wrapper element.

Common causes

  • v-for without :key inside TransitionGroup
  • Non-unique/random keys
  • Keys on a wrapper instead of direct children
  • Conditional children without keys
  • Copying <transition> usage

⚡ Quick fix

  1. <TransitionGroup name="list" tag="ul"><li v-for="i in items" :key="i.id">
  2. Use stable ids
  3. Put the key on the element directly under the group

Detailed fix by platform

Vue

  1. <TransitionGroup name="fade" tag="ul"><li v-for="t in todos" :key="t.id">{{ t.text }}</li></TransitionGroup>

How to diagnose

  1. Key — Present?
  2. Unique — Stable?
  3. Level — Direct child?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[Vue warn]: Duplicate keys found during update — Vue: [Vue warn]: Duplicate keys found during update: "5", possible duplicate or missing keys (Vue)[Vue warn]: Duplicate…[Vue warn]: Extraneous non-props attributes — Vue: [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes (Vue)[Vue warn]: Extraneou…Duplicate attribute (Vue template) — Vue: [plugin:vite:vue] Duplicate attribute. / [vue/no-duplicate-attributes] Duplicate attribute 'class' (Vue)Duplicate attribute (…ESLint Parsing error in .vue files — ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured) (Vue)ESLint Parsing error …v-if with v-for on the same element — Vue: [vue/no-use-v-if-with-v-for] / Vue 3: v-if has higher priority than v-for — property accessed during render is undefined (Vue)v-if with v-for on th…Vite: Failed to parse source / Unknown file extension ".vue" — Vite/Vue: [plugin:vite:import-analysis] Failed to parse source for import analysis — you may need to install appropriate plugins to handle the .vue file format (Vue)Vite: Failed to parse…vue-loader was used without the corresponding plugin — Webpack: Error: [vue-loader] vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. (Vue)vue-loader was used w…[Vue warn…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.