eslint-plugin-vue: valid-v-slot reporting errors on code that works

Tell us about your environment

ESLint version: 7.1.0
eslint-plugin-vue version: 6.2.2
Node version: 12.8.1

Please show your full configuration:

module.exports = {
	root: true,
	parserOptions: {
		parser: `babel-eslint`,
		ecmaVersion: 2017,
		sourceType: `module`,
	},
	env: {
		'node': true,
		'jquery': true,
	},
	extends: [
		`eslint:recommended`,
		`plugin:vue/recommended`,
	],
	ignorePatterns: [
		`!.*`,
		`node_modules/`,
		`wwwroot/`,
	],
	rules: {
		'vue/valid-v-slot': [`error`],
	},
}

What did you do? The below codepen is taken from a code example within Vuetify’s documentation (https://vuetifyjs.com/en/components/data-tables/#slots), where they use modifiers on a v-slot directive and therefore fall foul of the valid-v-slot rule. https://codepen.io/icleolion/pen/ExVJGbv

What did you expect to happen? As I implemented this code before I started using the rule, I knew the code worked as intended and therefore didn’t expect to see the rule to show errors. As per a discussion in Vuetify’s repository, they see this as a valid convention too. https://github.com/vuetifyjs/vuetify/discussions/11486#discussioncomment-18437

What actually happened? eslint-plugin-vue shows an error (as below) on code that works! 'v-slot' directive doesn't support any modifier. eslint(vue/valid-v-slot)

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 21
Comments: 21 (6 by maintainers)

Commits related to this issue

Disable eslint rule for v-slot validation See https://github.com/vuejs/eslint-plugin-vue/issues/1165 for more info — committed to falldamagestudio/cloud-symbol-server by Kalmalyzer a year ago

Most upvoted comments

Probably it changed to the intended behavior, so I reopen this issue. I think that good to add the allowModifiers option to allow this rule to accept modifiers. We need to see if any changes at the parser are needed.

+21

ota-meshi on Jun 12, 2020

Also An element cannot have multiple '<template>' elements which are distributed to the same slot when v-slot:body and v-slot:body.prepend are actually different slots.

+11

KaelWD on May 26, 2020

I’m still getting

'v-slot' directive doesn't support any modifier.eslint-plugin-vue

despite I’ve already added the rule and updated to the latest version (eslint-plugin-vue@7.1.0)

# .eslintrc.js
...
rules: {
  ...
  'vue/valid-v-slot': ['error', { allowModifiers: true }]

I know that ESLint is reading the config file, because if I make a typo it errors in vscode output console. Am I the only one?

+10

redraw on Nov 18, 2020

your source code probably won’t compile on Vue 3 at this time

add the allowModifiers option

It’s explicitly supported in vue 3 now, it should be allowed by this rule by default.

https://github.com/vuejs/vue-next/issues/1241

+10

KaelWD on Aug 14, 2020

Still getting this error on vscode and adding 'vue/valid-v-slot': ['error', { allowModifiers: true }] does not help either.

Only solution so far 

pathnirvana on Dec 5, 2020

I think this purely a vetur issue trying to use eslint to validate files on top of the default ESLint validation. So to fix this issue I had to set this

// myapp.code_workspace
"settings": {
    "vetur.validation.template": false
}

in the workspace file or the .vscode/settings.json. Using the above solution to change or turn off the vue/valid-v-slot rule inside .eslintrc does not help because I am using eslint-plugin-vue@6.2.2

mtermoul on Dec 10, 2020

this is a solution to the problem. https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier

Rony20191 on Aug 13, 2020

I know that ESLint is reading the config file, because if I make a typo it errors in vscode output console. Am I the only one?

@redraw No you’re not the only one. VS Code still throws the error, while eslint is doing okay. Still trying to figure out what’s going wrong

jansen-imagem on Nov 24, 2020

this is a solution to the problem. https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier

Doesn’t work for me 😦 I have [`item.actions`] anyway

PS: I solved my problem. As I sad, I’m using VSCode & Ventur. It was Ventur formatter. Exactly formatter for HTML. I changed prettyhtml to prettier and all works fine. Don’t need .prettier config, I removed it.

UncleVic on Aug 27, 2020

Thank you for posting this issue.

I think vue/valid-v-slot rule is working correctly. You can’t use vue/valid-v-slot rule, so turn it "off".

Also, your source code probably won’t compile on Vue 3 at this time.

https://vue-next-template-explorer.netlify.app/#{"src"%3A"<MyComponent>\n <template v-slot%3Aitem.name%3D\"props\"><%2Ftemplate>\n<%2FMyComponent>"%2C"ssr"%3Afalse%2C"options"%3A{"mode"%3A"module"%2C"prefixIdentifiers"%3Afalse%2C"optimizeBindings"%3Afalse%2C"hoistStatic"%3Afalse%2C"cacheHandlers"%3Afalse%2C"scopeId"%3Anull}}

ota-meshi on May 26, 2020