How to disable vue/multi-word-component-names eslint rule for just one .vue file?

Question

I am using the Vue ESLint plugin and it has a rule for not allowing single word component names.

However, I am also using Nuxt, and to set a default Layout in Nuxt you need a .vue component named default.vue which throws the ES Lint rule errors.

I can't seem to get it to just disable in that one .vue file that is actually pretty small...

<template>
    <div>
        <Header/>
        <Nuxt/>
    </div>
</template>

But if I disable the rule in my .eslintrc.js then it works.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier',
  ],
  plugins: [],
  // add your custom rules here
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}

Is there a way to disable the rule for just one Vue file?

Solution 1

In your case, you can replace

'vue/multi-word-component-names': 'off'

with:

'vue/multi-word-component-names': ['error', {
  'ignores': ['default']
}]

this will set the rule to 'allow' for all files named 'default'

you can read more about it here: https://eslint.vuejs.org/rules/multi-word-component-names.html

Solution 2

rules: { 'vue/multi-word-component-names': 0 } try this way

Comments

[Estus Flask]

Does this answer your question? Turning off eslint rule for a specific file

[Estus Flask]

FWIW, this rule is totally impractical and could be disabled forever.

[kissu]

This is marked as essential here: vuejs.org/v2/style-guide/#Multi-word-component-names-essenti‌​al

[Jeremy Caney]

Isn't this functionally equivalent to the existing answer?

[HJW]

@JeremyCaney Same as which one? It's 0 not off

[Titus Sutio Fanpula]

Thanks, it's working.

[Titus Sutio Fanpula]

This working for me. Thanks