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>
🔧 Options
json
{
"vue/require-toggle-inside-transition": ["error", {
"additionalDirectives": []
}]
}
additionalDirectives
(string[]
) ... Custom directives which will satisfy this rule in addition tov-show
andv-if
. Should be added without thev-
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>
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0