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?

Answer 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

Answer 2

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

Answer 3

Go to package.json and in the eslintConfig object add the following rule: "vue/multi-word-component-names": "off"

or even better: "vue/multi-word-component-names": 0

Like so:

Answer 4

You should have eslintConfig in package.json.

You need just set vue/multi-word-component-names to 0

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

Answer 5

You can override the rule to apply only for the specific files.

Here's the .eslintrc.js configuration

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier',
  ],
  plugins: [],
  overrides: [
    {
      files: ['src/components/default.vue'],  // Change this to default.vue path
      rules: {
        'vue/multi-word-component-names': 'off',
      }
    }
  ]
}

Answer 6

Just the below line the vue.config.js file:

module.exports = defineConfig({
  ....
  lintOnSave: false
})

Answer 7

1. Go to the vue.config.js file

2. Add lintOnSave:false to the file.

Answer 8

1. Run Command npm install standardx --global.

2. In vue.config.js, add lintOnSave:false.

3. In App.vue inside template, add div as parent element and wrap your image and component that you are using in that.

Answer 9

Here are the two ways to actually resolve this problem.

1 Use CamelCase minimum two words to for Component Name.

export default {
name: "HeaderComponent" // Header to HeaderComponent
}

2 Add the following code to the package.json:eslintConfig.rules to disable this rule.

"vue/multi-word-component-names": 0

3 Remove the eslint package from node_modules.

$ npm remove @vue/cli-plugin-eslint

Answer 10

I tried all the answers above for a component named "Header.vue", but none of them worked. I finally added a comment to disable the rule in eslint, like so,

From:

<script lang="js">
    export default {        
        name: 'Header',
    };
</script>

To:

<script lang="js">
    export default {
        // eslint-disable-next-line
        name: 'Header',
    };
</script>

Answer 11

You can replace vue.config.js with:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})