<transition-group> component of Vue should be used properly

  • VUE_BAD_TRANSITION_GROUP
  • Error
  • Medium
  • vue

This rule applies when <transition-group> component of Vue is wrongly used.

It can be applied to the following cases:

  1. <transition> is used on multiple elements. In this case, Vue renders only the first child and ignores the rest. You can fix this problem by applying one of the following:
    • Use <transition-group> instead of <transition> if the effect is intended for each child separately.
    • Use a wrapper element for the children if the effect is intended for the children as a whole.
    • Select one child by using conditional directives like v-if.
  2. Elements inside <transition-group> do not have key attribute. In this case, the elements without key will not be rendered.

Noncompliant Code Example

View with compliant examples side by side 
<template>
  <!-- Example 1 -->
  <transition> <!-- VUE_BAD_TRANSITION_GROUP alarm because '<transition>' has three elements as children. -->
    <button>Edit</button>
    <button>Save</button>
    <button>Cancel</button>
  </transition>

  <!-- Example 2 -->
  <transition name="list"> <!-- VUE_BAD_TRANSITION_GROUP alarm because the child element has 'v-for'. That means, it will be rendered as multiple elements. -->
    <span v-for="item in items" v-bind:key="item.id" class="list-item">
      {{ item }}
    </span>
  </transition>

  <!-- Example 3 -->
  <transition-group name="list" tag="p">
    <span v-for="item in items" class="list-item"> <!-- VUE_BAD_TRANSITION_GROUP alarm because '<span>' does not have 'key' attribute. -->
      {{ item }}
    </span>
  </transition-group>
</template>

Compliant Code Example

View with noncompliant examples side by side 
<template>
  <!-- Example 1 -->
  <transition>
    <button v-if="docState === 'saved'">Edit</button>
    <button v-else-if="docState === 'edited'">Save</button>
    <button v-else-if="docState === 'editing'">Cancel</button>
  </transition>

  <!-- Example 2 -->
  <transition-group name="list">
    <span v-for="item in items" v-bind:key="item.id" class="list-item">
      {{ item }}
    </span>
  </transition-group>

  <!-- Example 3 -->
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item.id" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</template>

Version

This rule was introduced in DeepScan 1.17.0-beta.

See

Was this documentation helpful?

Last updated on July 21, 2025