diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js
index fc46f75f9..423d4beb7 100644
--- a/lib/rules/require-toggle-inside-transition.js
+++ b/lib/rules/require-toggle-inside-transition.js
@@ -6,6 +6,20 @@
const utils = require('../utils')
+/**
+ * @param {VDirective} vBindAppear
+ */
+function isValidBindAppear(vBindAppear) {
+ if (
+ vBindAppear.value?.expression &&
+ vBindAppear.value.expression.type === 'Literal'
+ ) {
+ return vBindAppear.value.expression?.value !== false
+ }
+
+ return true
+}
+
module.exports = {
meta: {
type: 'problem',
@@ -35,7 +49,11 @@ module.exports = {
/** @type VElement */ // @ts-expect-error
const parent = element.parent
- if (utils.hasAttribute(parent, 'appear')) {
+ const vBindAppear = utils.getDirective(parent, 'bind', 'appear')
+ if (
+ utils.hasAttribute(parent, 'appear') ||
+ (vBindAppear && isValidBindAppear(vBindAppear))
+ ) {
return
}
diff --git a/tests/lib/rules/require-toggle-inside-transition.js b/tests/lib/rules/require-toggle-inside-transition.js
index 815f5de3d..d40ad4748 100644
--- a/tests/lib/rules/require-toggle-inside-transition.js
+++ b/tests/lib/rules/require-toggle-inside-transition.js
@@ -68,6 +68,15 @@ tester.run('require-toggle-inside-transition', rule, {
{
filename: 'test.vue',
code: ''
+ },
+ {
+ // https://github.com/vuejs/eslint-plugin-vue/issues/2467
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
}
],
invalid: [
@@ -113,6 +122,16 @@ tester.run('require-toggle-inside-transition', rule, {
filename: 'test.vue',
code: ' ',
errors: [{ messageId: 'expected' }]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: [{ messageId: 'expected' }]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: [{ messageId: 'expected' }]
}
]
})