Sometimes, we want to fix the “’v-slot’ directive doesn’t support any modifier” ESLint error in Vue.js.

In this article, we’ll look at how to fix the “’v-slot’ directive doesn’t support any modifier” ESLint error in Vue.js.

How to fix the “’v-slot’ directive doesn’t support any modifier” ESLint error in Vue.js?

To fix the “’v-slot’ directive doesn’t support any modifier” ESLint error in Vue.js, we wrap our slot name with periods in the name with backticks.

For instance, we write

<template>
  <template v-slot:[`item.actions`]="{ item }"> ... </template>
</template>

to add the item.actions slot with v-slot:[item.actions] to avoid having the “’v-slot’ directive doesn’t support any modifier” being thrown when we use ESLint in our Vue CLI project.

Conclusion

To fix the “’v-slot’ directive doesn’t support any modifier” ESLint error in Vue.js, we wrap our slot name with periods in the name with backticks.