useVueToggleInsideTransition (HTML)

Language HTML

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/useVueToggleInsideTransition
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/require-toggle-inside-transition

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useVueToggleInsideTransition": "error"
6
      }
7
    }
8
  }
9
}

Description

Require the element inside a Vue <Transition> to be shown and hidden with v-if or v-show.

A <Transition> plays its animation when the element inside it is added, removed, shown, or hidden. An element that is always shown never changes, so the animation never plays.

The rule checks the first element inside each <Transition>. That element is accepted when one of the following is true:

it has a v-if or v-show directive;
it has a key bound with :key or v-bind:key, because Vue replaces the element when the key changes;
it is a component, a <component>, a <slot>, or an element with an is attribute, because the rule can’t see what they render;
the <Transition> has the appear attribute, which plays the animation when the element is first shown. :appear="false" doesn’t count.

Examples

Invalid

1
<template>
2
  <Transition>
3
    <div>Content</div>
4
  </Transition>
5
</template>

code-block.vue:3:5 lint/nursery/useVueToggleInsideTransition ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This element inside <Transition> is never shown or hidden.
  
    1 │ <template>
    2 │   <Transition>
  > 3 │     <div>Content</div>
      │     ^^^^^
    4 │   </Transition>
    5 │ </template>
  
  ℹ A transition only plays when the element inside it appears or disappears. This element is always present, so the transition never plays.
  
  ℹ Add v-if or v-show to the element, or bind a :key that changes when the content does.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<template>
2
  <Transition>
3
    <div v-if="visible">Content</div>
4
  </Transition>
5
  <Transition>
6
    <div v-show="visible">Content</div>
7
  </Transition>
8
  <Transition>
9
    <div :key="step">Content</div>
10
  </Transition>
11
  <Transition>
12
    <MyComponent />
13
  </Transition>
14
  <Transition appear>
15
    <div>Content</div>
16
  </Transition>
17
</template>