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?

Does this answer your question? [Turning off eslint rule for a specific file](https://stackoverflow.com/questions/34764287/turning-off-eslint-rule-for-a-specific-file) — Estus Flask, Jan 03 '22 at 21:34
FWIW, this rule is totally impractical and could be disabled forever. — Estus Flask, Jan 03 '22 at 21:35
This is marked as essential here: https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential — kissu, Jan 04 '22 at 07:59

score 24 · Answer 1 · answered Jan 04 '22 at 10:30

24

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

answered Jan 04 '22 at 10:30

Ahmad Ibrahim

241
1
2

Thanks, it's working. – Titus Sutio Fanpula Mar 18 '22 at 23:33

score 5 · Answer 2 · answered Mar 09 '22 at 01:10

5

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

answered Mar 09 '22 at 01:10

HJW

121
1
8

Isn't this functionally equivalent to the existing answer? – Jeremy Caney Mar 10 '22 at 00:40
@JeremyCaney Same as which one? It's 0 not off – HJW Mar 10 '22 at 08:37
This working for me. Thanks – Titus Sutio Fanpula Mar 18 '22 at 23:35

score 0 · Answer 3 · edited Mar 24 '22 at 21:30

0

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

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

edited Mar 24 '22 at 21:30

vinzee

17,022
14
42
60

answered Mar 24 '22 at 21:28

Rehan Syed

1
1

score 0 · Answer 4 · answered Mar 26 '22 at 11:22

0

In your case, you can replace

vue.config.js

with:

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

answered Mar 26 '22 at 11:22

Jonas Oliveira

11
1

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

4 Answers4

Linked