Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork698
Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read theFAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 8.57.1
- eslint-plugin-vue version: 10.5.1
- Vue version: 2.7.16
- Node version: 22.18.0
- Operating System: Mac OS 26
Please show your full configuration:
constERROR_LEVELS=Object.freeze({off:0,warn:1,error:2,})consteslintSettings={root:true,parserOptions:{sourceType:'module',ecmaVersion:'2022',},env:{es2022:true,browser:true,},globals:{aptrinsic:'readonly',__dirname:true,process:true,module:true,global:'readonly',// Add 'global' as a global variable and mark it as readonlyBuffer:'readonly',// Add 'Buffer' as a global variable and mark it as readonlyrequire:true,},// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-styleextends:['eslint:recommended','plugin:vue/vue2-recommended'],// Required to lint *.vue filesplugins:['vue',],rules:{'vue/html-indent':ERROR_LEVELS.off,'vue/no-restricted-html-elements':[ERROR_LEVELS.error,{element:'RouterLink',message:`Use RouterLinkCfm instead.`,},],'vue/no-multiple-template-root':[ERROR_LEVELS.error,{disallowComments:true}],//#endregion Vue - HTML},}module.exports=eslintSettings
What did you do?
<script>import*asvueRouterFilefrom'vue-router'exportdefault { name:'RouterLinkCfm', components: { RouterLink:vueRouterFile.RouterLink },}</script><!-- eslint-disable vue/no-restricted-html-elements--><template> <RouterLinkclass="router-link-cfm":custom="true" /></template><!-- eslint-enable vue/no-restricted-html-elements-->
What did you expect to happen?
My eslint-disable/enable comment is not a violation because it's OUTSIDE the template tag
What actually happened?
10:1 error The template root disallows comments vue/no-multiple-template-root
17:1 error The template root disallows comments vue/no-multiple-template-root
Repository to reproduce this issue
https://github.com/ArianeBouchardConformit/eslint-bug-repro-vue-no-multiple-template-root
Extra details
We're gradually preparing for a migration to Vue 3, and in Vue 3,this.$refs.myRef.$el (which you might use to get the exact height of a child component, for instance) will not work as intended if you have multiple root elements, even if one of them is an HTML comment. I thought the solution was to move all comments like this one that concerns an ESLint rule exception:
<template><!-- eslint-disable-next-line vue/no-restricted-html-elements--> <RouterLinkclass="router-link-cfm":custom="true" /></template>
outside of the template tag, like this:
<!-- eslint-disable vue/no-restricted-html-elements--><template> <RouterLinkclass="router-link-cfm":custom="true" /></template><!-- eslint-enable vue/no-restricted-html-elements-->
And then, I wanted to block any future such instances with an ESLint rule. But the rule I wanted to use for this,vue/no-multiple-template-root withdisallowComments: true, gets triggered by comments OUTSIDE of my template tag as well.