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

[sbernard31]

I'm new in vue world.

And I'm currently writing a vue/vuetify application using vscodium as IDE.

I follow the standard way to create my app :

vue create my-app
cd my-app
vue add vuetify

Now in vscodium I get this kind of error :

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

for this kind of code :

<template>
  <v-data-table
    dense
    :loading="loading"
    :headers="headers"
    :items="registrations"
    item-key="endpoint"
    :items-per-page="5"
    class="elevation-1"
    @click:row="openLink"
  >
    <!-- ======= ERROR FOR THIS 2 SLOTS ======== -->
    <template v-slot:item.registrationDate="{ item }">
      {{ new Date(item.registrationDate) | moment("from") }}
    </template>
    <template v-slot:item.lastUpdate="{ item }">
      {{ new Date(item.lastUpdate) | moment("from") }}
    </template>
  </v-data-table>
</template>

But the code works and it seems I follow the recommended way by vuetify : https://vuetifyjs.com/en/components/data-tables/#item

I checked eslint-plugin-vue issues there is a lot of issue reported related to this.

I also find some kind of workaround :
Using this v-slot:[`item.registrationDate`] instead of v-slot:item.registrationDate seems to make the validator happy.

It seems there is also a kind of fix but it need some configuration : vuejs/eslint-plugin-vue#1330 (comment)

My question are :

1. is the workaround the good way to go ? if yes is the vuetify doc should be updated ?
2. is the configuration the good way to go ? if yes, should it be done by default by a vue-cli plugin for vuetify ?

I ask this question here hoping this is the best place halfway between vuetify and eslint-plugin-vue.

[sbernard31]

Maybe some people from vuetify and other from eslint-plugin-vue should participate too ?
I guess @ota-meshi from eslint-plugin-vue is aware about this issue.
I don't know who to ask for vuetify ?

[ElijahKotyluk]

The eslint rule is coming from the Vue eslint plugin, which is provided by Vue cli when generating a project and selecting eslint as an option, you can disable the rule in your eslint config to get around it.

[sbernard31]

Thx you very much for the answer.
For my usage I find many way to resolve this issue either using the v-slot:[`item.registrationDate`] way
or the config way :

• upgrading to "eslint-plugin-vue": "^7.1.0"
• add this line in package.json : "rules": { "vue/valid-v-slot": ["error", { "allowModifiers": true }]}
• (for vscodium/vetur only : add "vetur.validation.template": false in vetur.config.js for me reopen folder is needed)

But If I take time to reporting this, this is more to try to move the vuetify community to an out of the box working way. 🙂

I mean regarding your answer the right way is the configuration (not the v-slot:[`modifier`] syntax).
So naïvely, I would expect this configuration was automatically added on : vue add vuetify. Is there any reason not to doing this ?

[fenilli]

• (for vscodium/vetur only : add "vetur.validation.template": false in vetur.config.js for me reopen folder is needed)

this one disables vetur validation completely, makes it really bad if you're working with eslint and prettier to format your code, as you don't get those amazing red lines that tell you that your code is too big and needs to be formated.

is there any other workaround this? as I don't want to disable vetur, I want vetur to use my rules inside eslintrc.

[jasonbrent]

Piling on to this closed issue.... Using the eslintrc.js workaround with nuxt/vuetify/vue2 works exactly once per save of eslintrc. As soon as I save the component again, the error reappears until I simply touch the eslintrc.