eslint-plugin-vue

Appearance

vue/require-toggle-inside-transition ​

require control the display of the content inside <transition>

  • ⚙️ This rule is included in all of "plugin:vue/essential", *.configs["flat/essential"], "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/recommended" and *.configs["flat/recommended"].

📖 Rule Details ​

This rule reports elements inside <transition> that do not control the display.

<template> <!-- ✓ GOOD --> <transition><div v-if="show" /></transition> <transition><div v-show="show" /></transition> <!-- ✗ BAD --> <transition><div /></transition> </template>
Now loading...

🔧 Options ​

json
{
  "vue/require-toggle-inside-transition": ["error", {
    "additionalDirectives": []
  }]
}
  • additionalDirectives (string[]) ... Custom directives which will satisfy this rule in addition to v-show and v-if. Should be added without the v- prefix.

additionalDirectives: ["dialog"] ​

<template> <!-- ✓ GOOD --> <transition><div v-if="show" /></transition> <transition><div v-show="show" /></transition> <transition><dialog v-dialog="show" /></transition> <!-- ✗ BAD --> <transition><div /></transition> <transition><div v-custom="show" /></transition> <template>
Now loading...

📚 Further Reading ​

🚀 Version ​

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation ​