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

Question

I am using vuetify's datatable, i this 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 above code snippet in my file it gives me error

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

as per this docs it is right https://eslint.vuejs.org/rules/valid-v-slot.html

but it don't have any example to how we handle this case

how can i remove this warning/or make it correct way , without making it exemption

Thanks

score 377 · Accepted Answer · edited Aug 07 '20 at 22:06

377

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 }">

edited Aug 07 '20 at 22:06

Dharman

30,962
25
85
135

answered Aug 07 '20 at 22:00

Hexodus

12,361
6
53
72

15

My code formatter is not liking this workaround, its converting it to this ` – Diego Garcia Aug 13 '20 at 06:34
@DiegoGarcia Backtiks come with ECMAScript 6 so you stack most probably does use ES5. You could update your stack to be able to handle ES6 or give single quotes a try. – Hexodus Aug 13 '20 at 15:08
@Hexodus I am using ES6 and same problem as DiegoGarcia – Chris Herbst Aug 14 '20 at 13:31
@ChrisHerbst Well there seems to some difference between our tools or stacks. I'm using vscode and latest 2.x Vue with 3.x Cli by the way. – Hexodus Aug 14 '20 at 19:23
1

@DiegoGarcia add `"parser": "vue"` to your `.prettierrc` file or `--parser vue` to your command – Michael Smith Aug 19 '20 at 10:38
8

@Hexodus, the '#' is a Vue shortcut for 'v-slot:' – Lubo Antonov Sep 03 '20 at 19:43
8

for anyone who was looking for the shorthand notation in the docs like me: https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand – J. Unkrass Sep 04 '20 at 08:49
2

@DiegoGarcia you are probably using Vetur, you can change vetur html formatter from it's settings. Change it from prettyhtml to prettier. – Mehmet Can Kamar Sep 16 '20 at 19:41
For me worked only with item without curly brackets: `` – Luca Oct 01 '20 at 13:22
v-slot:item.name="props" What about this? i have the same error with it – Khorshid Nov 07 '20 at 10: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 Dec 09 '20 at 17:07
Does anybody know why we should use backticks in that case instead of quotes? – MegaCasper Jul 12 '21 at 18:13
Even though this works, explicitly allowing modifiers in the eslint config, as described in @nokazn's answer, feels cleaner to me. – Kim Jul 25 '21 at 15:02
What should I do with typescript? If I use this solution it will produce a TS 2538 error, since I can't simply use strings as array indexes It says "Type 'string[]' cannot be used as an index type" and won't compile – Glenn Carver Mar 26 '23 at 10:04

score 60 · Answer 2 · edited Nov 20 '20 at 12:16

60

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

edited Nov 20 '20 at 12:16

Amade

3,665
2
26
54

answered Oct 30 '20 at 13:36

nokazn

701
6
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 Nov 02 '20 at 21:54
8

This doesn't seem to work with my setup, nuxtjs, vscode... – Ben Winding Nov 30 '20 at 02:12
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. – Hendrik Jan Oct 05 '21 at 08:03

score 24 · Answer 3 · answered Oct 28 '20 at 13:30

24

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

 "vetur.validation.template": false

answered Oct 28 '20 at 13:30

Daniel Schmidt

321
3
4

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 https://gitmemory.com/issue/vuejs/eslint-plugin-vue/1269/668921391) – RTF Jan 12 '21 at 15:15
2

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 Oct 31 '21 at 14:46
4

Are you sure that doing so will not disable anything else beside of that? – Ahmad May 07 '22 at 15:22

score 17 · Answer 4 · answered Mar 17 '22 at 07:57

17

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 }">

answered Mar 17 '22 at 07:57

Cosmin Stoian

757
10
15

score 15 · Answer 5 · edited May 18 '23 at 08:01

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.

I disagree. As the answer from @Hexodus shows, this problem can be solved. — therealak12, Aug 10 '20 at 11:11

score 4 · Answer 6 · edited Oct 09 '21 at 23:32

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

edited Oct 09 '21 at 23:32

Flame

6,663
3
33
53

answered Oct 05 '21 at 10:11

Zaid Qassim

109
1
5

1

Works for Neovim too! – Riza Khan Dec 11 '21 at 21:32

score 3 · Answer 7 · answered Aug 24 '20 at 16:54

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  to disable eslint for next line or  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!

`` is what did it for me. – shaneparsons May 05 '21 at 13:59 — shaneparsons, May 05 '21 at 13:59
Can't believe I came back searching for my own answer – DAVID AJAYI Jun 03 '21 at 08:34 — DAVID AJAYI, Jun 03 '21 at 08:34

Max Silver · Answer 8 · 2020-09-14T16:26:00.363

3

It worked for me:

in .vue

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

in .js

 methods: {
    getitemcontrols() {
      return `item.controls`;
    },

edited Sep 14 '20 at 16:26

answered Sep 14 '20 at 16:15

Max Silver

31
3

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 Sep 15 '20 at 18:07

score 2 · Answer 9 · answered Nov 21 '20 at 19:36

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"
    }
  }

answered Nov 21 '20 at 19:36

Piotr Żak

2,083
6
29
42

score 1 · Answer 10 · answered Jun 23 '23 at 19:51

1

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

answered Jun 23 '23 at 19:51

Maynor Peralta

111
2
3

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

10 Answers10

Linked