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

[icleolion]

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)

[KaelWD]

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.

[icleolion]

Yeah I was going to take it as a given that if modifiers become accepted as valid practice then they should be taken into account by that part of the rule looking for duplicate slot names too.

[ota-meshi]

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/#%7B%22src%22%3A%22%3CMyComponent%3E%5Cn%20%20%3Ctemplate%20v-slot%3Aitem.name%3D%5C%22props%5C%22%3E%3C%2Ftemplate%3E%5Cn%3C%2FMyComponent%3E%22%2C%22ssr%22%3Afalse%2C%22options%22%3A%7B%22mode%22%3A%22module%22%2C%22prefixIdentifiers%22%3Afalse%2C%22optimizeBindings%22%3Afalse%2C%22hoistStatic%22%3Afalse%2C%22cacheHandlers%22%3Afalse%2C%22scopeId%22%3Anull%7D%7D

[icleolion]

Can't argue that the rule is working correctly, it is indeed picking up the modifiers. The issue is that the code it is complaining about works, so is the existence of the rule preventing modifiers valid? If it is valid (from a Vue 2 perspective) then could you expand on why please? Is all Vue 2 related work for this plugin (6.x releases) stopped now?

As for Vue 3, you say "at this time", does that mean the intention is for this use of modifiers on v-slots to work when Vue 3 ships, or should another method of achieving the same functionality be found?

Oh and I do currently have the rule turned off. It's just a disappointing situation, having a rule that checks 8 things, and because 2 of them are I thought "debatable", I either have to turn rule off and lose benefit of the other 6 checks or litter code with eslint-disable to remove eslint noise to stop builds failing.

[ota-meshi]

Hi @icleolion.

I wrote about the status in Vue 3 because I thought you or a member of Vuetify would need to take action if you plan to get Vuetify working in Vue 3 so I shared it.

I don't think any documentation mentions that modifiers can be used (or modifiers is parsed as a string), so I think the use of modifiers in Vue 2 is probably unintended behavior. (If not, please let me know.) So I think the current rule is correct.

I don't think I need to extend the this rule. You can turn off this rule.

[icleolion]

I wrote about the status in Vue 3 because I thought you or a member of Vuetify would need to take action if you plan to get Vuetify working in Vue 3 so I shared it.

Yep, appreciate that, and have made sure that they have definitely seen this. Hopefully they can find an alternative way of doing this that's just as neat as the modifier way!

I'm happy to consider this case closed. I'm sure if Vuetify want to argue the point they can pick it up with the Vue.js team themselves, as you say this is probably unintended behaviour, so if they want it to be "intended" someone is going to need to have a chat.

[ota-meshi]

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.

[dominik-krawczyk-rmtcfm-com]

Same issue as in #1272 . Waiting for the resolve.

[Rony20191]

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

[KaelWD]

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

[UncleVic]

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.

[vintprox]

Why did 'v-slot' directive doesn't support any modifier appear in the first place? 🤔
It's a waste of screen space and nerve cells, plus slot name containing a dot is interpreted by Vue as usual. Nobody writes slot names and expects them to be magically "modified" in behavior as the directives.

[Jaffsterz]

Does anyone know if there is an intention to fix this? We've upgraded to the latest version that applies this rule and suddenly our (valid) code is reporting loads of errors - as far as I can see, not only is this valid but it's the recommended way of customizing Vuetify table columns?

The two issues we see most incorrectly reported are:

"'v-slot' directive doesn't support any modifier"

and (presumably as a result of the above)

"An element cannot have multiple 'template' elements which are distributed to the same slot"

I guess we could disbale the rule but I'd rather not miss any other genuinely invalid slot-related code.