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

Question

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.

Raney

Answer 1

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

Stoller

My code formatter is not liking this workaround, its converting it to this <template v-slot:[&#x60;item.actions&#x60;]="{ item }"> any ideas? – Zagreb

@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. – Stoller

@Stoller I am using ES6 and same problem as DiegoGarcia – Gaskill

@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. – Stoller

@DiegoGarcia add "parser": "vue" to your .prettierrc file or --parser vue to your command – Sally

@Hexodus, the '#' is a Vue shortcut for 'v-slot:' – Ogrady

for anyone who was looking for the shorthand notation in the docs like me: vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand – Pernicious

@DiegoGarcia you are probably using Vetur, you can change vetur html formatter from it's settings. Change it from prettyhtml to prettier. – Microgroove

For me worked only with item without curly brackets: <template v-slot:[footer.page-text]="item"> {{ item.pageStart }} - {{ item.pageStop }} {{ $t("dataTable.of") }} {{ item.itemsLength }} </template> – Gusty

v-slot:item.name="props" What about this? i have the same error with it – Moncrief

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. – Nievesniflheim

Does anybody know why we should use backticks in that case instead of quotes? – Raeannraeburn

Even though this works, explicitly allowing modifiers in the eslint config, as described in @nokazn's answer, feels cleaner to me. – Pelayo

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 – Rolfrolfe

Answer 2

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

Yager

Or if you have a javascript formatted file (.eslintrc.js) like me you can add: rules: { 'vue/valid-v-slot': [ 'error', { allowModifiers: true, }, ], }, – Serrate

This doesn't seem to work with my setup, nuxtjs, vscode... – Ironclad

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. – Khiva

Answer 3

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

 "vetur.validation.template": false

Hap

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) – Kinshasa

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. – Jazzman

Are you sure that doing so will not disable anything else beside of that? – Mouthwatering

Answer 4

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

Renin

Answer 5

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.

Emaemaciate

I disagree. As the answer from @Stoller shows, this problem can be solved. – Carousal

Looks like this is now enabled by default FYI – Nonviolence

Answer 6

Try this:

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

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

"vetur.validation.template": false

Plagiarism

Works for Neovim too! – Oscillation

Answer 7

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!

Loser

<!-- eslint-disable-next-line --> is what did it for me. – Clementeclementi

Can't believe I came back searching for my own answer – Loser

Answer 8

It worked for me:

in .vue

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

in .js

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

Hifi

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) – Tincture

Answer 9

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

Peppercorn

Answer 10

For me this config added to package.json worked

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

Hines