139

I am using Vuetify's datatable, we have different slots with some props for example below

<template #header.data-table-select="{ on, props }">
   <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox>
</template>

I am also using Vue's eslint plugin to check for any errors/bad code / or any violation, but if I use the above code snippet in my file it gives me the error

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

as per this doc, it is right.

but it doesn't have any example of how we should handle this case.

how can I remove this warning/or fix it correctly, without making it an exemption.

10 Answers 10

406

I don't see any v-slot in the code you provided so I can show you only my usecase.

With Eslint error:

<template v-slot:item.actions="{ item }">

Without error:

<template v-slot:[`item.actions`]="{ item }">
14
  • 15
    My code formatter is not liking this workaround, its converting it to this <template v-slot:[&#x60;item.actions&#x60;]="{ item }"> any ideas? Commented Aug 13, 2020 at 6:34
  • 10
    @Hexodus, the '#' is a Vue shortcut for 'v-slot:' Commented Sep 3, 2020 at 19:43
  • 8
    for anyone who was looking for the shorthand notation in the docs like me: vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand
    – J. Unkrass
    Commented Sep 4, 2020 at 8:49
  • 2
    @DiegoGarcia you are probably using Vetur, you can change vetur html formatter from it's settings. Change it from prettyhtml to prettier. Commented Sep 16, 2020 at 19:41
  • 2
    I did not know you could do this! We have these warnings on several pages and this makes my OCD just a little bit happier.
    – dustbuster
    Commented Dec 9, 2020 at 17:07
69

In eslint-plugin-vue@^7.1.0, you can use allowModifiers option in vue/valid-v-slot rule.

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

vue/valid-v-slot #options

3
  • 3
    Or if you have a javascript formatted file (.eslintrc.js) like me you can add: rules: { 'vue/valid-v-slot': [ 'error', { allowModifiers: true, }, ], },
    – Jason
    Commented Nov 2, 2020 at 21:54
  • 8
    This doesn't seem to work with my setup, nuxtjs, vscode... Commented Nov 30, 2020 at 2:12
  • 2
    It seems that when Vetur is installed, the rule cannot be disabled in .eslintrc. It seems that the answer by Daniel Schmidt is the solution. Commented Oct 5, 2021 at 8:03
25

For me the following Entry in settings.json fixed the problem:

 "vetur.validation.template": false
3
  • 3
    This also worked for me. Apparently this error originates from Vetur whose built-in eslint-plugin-vue does not reference a projects .eslintrc . (taken from gitmemory.com/issue/vuejs/eslint-plugin-vue/1269/668921391)
    – RTF
    Commented Jan 12, 2021 at 15:15
  • 3
    Adding this line to the .vscode/settings.json in my project root didn't work. To get this to work, I had to go to File --> Preferences --> Extensions, select the Vetur extension, click on it's settings, scroll down to find "Edit in settings.json" and add the line to the bottom of that file. That's a different file for whatever reason, so it worked when I added it there.
    – alfreema
    Commented Oct 31, 2021 at 14:46
  • 5
    Are you sure that doing so will not disable anything else beside of that?
    – Ahmad
    Commented May 7, 2022 at 15:22
18

I tried Hexodus' answer, but the template wasn't rendering at all in my case.

I got it to work perfectly with this, without any eslint rule modification:

<template #[`item.actions`]="{ item }">
17

EDIT: As notified by the comments and Hexodus' (correct) answer, you can work around the linting warning by using dynamic slot names that return a string(template). 'Not enabling' is no longer recommended, as this is now a standard rule. Thus, I recommend using Hexodus' method over disabling the valid v-slot rule altogether.


Original Post:

You can't really fix this linting warning.

  • Vue syntax for modifiers use the dot to alter the way a directive functions (e.g. v-model.number)
  • The way Vuetify dynamically names their slots uses a dot in order to select a specific part of the component (#header.data-table-select).

ESLint can't distinguish whether you're trying to set a modifier on a slot (which is impossible), or if you have a slot name that contains a dot.

The easiest thing you can do is disable the rule. Since the 'valid-v-slot' rule isn't enabled by default by any of the base configurations of eslint-plugin-vue, you should be able to find it under "rules" in your eslint config.

2
  • 1
    I disagree. As the answer from @Hexodus shows, this problem can be solved. Commented Aug 10, 2020 at 11:11
  • 2
    Looks like this is now enabled by default FYI Commented Aug 10, 2020 at 18:56
4

Try this:

<template v-slot:item.createdDate="{ item }">

if you use the format vetur, add this option in vscode settings:

"vetur.validation.template": false
1
  • 1
    Works for Neovim too!
    – Riza Khan
    Commented Dec 11, 2021 at 21:32
3

Maybe this isn't the answer, and you also may not buy into my solution but this is what I did.

ANS: I downgraded Vetur to version 0.23! It worked! (Waiting a new version release that addresses the issue.

Open the Extensions side panel on VSCode, right click Vetur and select install other versions.

Alternatively, if your code is working fine, a line before the vue-eslint-plugin error you can try <!-- eslint-disable-next-line vue/no-v-html --> to disable eslint for next line or <!-- eslint-disable --> to disable every disable linting below it.

Worked for some people but not for me and may not work for you. Either way, prefer Vetur downgrade

I am using laravel framework, and vuetify. Previous codes suddenly reported eslint errors with red lines - vue/valid-v-slot directive, adding multiple root nodes to the template, and so on without recommending any quick fix, yet they are all working fine. Answers I got from search never yielded any result till I downgraded, any other solution will be so welcomed!

2
  • 2
    <!-- eslint-disable-next-line --> is what did it for me. Commented May 5, 2021 at 13:59
  • 1
    Can't believe I came back searching for my own answer Commented Jun 3, 2021 at 8:34
3

It worked for me:

in .vue

<template v-slot:[getitemcontrols()]="props">

in .js

 methods: {
    getitemcontrols() {
      return `item.controls`;
    },
1
  • 2
    you should use computed in this case. That would be a good solution when dealing with deep-nested values (for instance item.controls.user.devReports.ReportBug)
    – Tzahi Leh
    Commented Sep 15, 2020 at 18:07
3

You can define the dynamic slot name as follows:

<template #[`item.actions`]="{ item }">
// your code
</template>

You can find more information in the official Vue documentation: https://vuejs.org/guide/components/slots.html#dynamic-slot-names

2

For me this config added to package.json worked

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/base"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.