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?
require component names to be always multi-word
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential","plugin:vue/essential","plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended".
📖 Rule Details
This rule require component names to be always multi-word, except for root App components, and built-in components provided by Vue, such as <transition> or <component>. This prevents conflicts with existing and future HTML elements, since all HTML elements are single words.
🔧 Options
json
{
"vue/multi-word-component-names": ["error", {
"ignores": []
}]
}
ignores(string[]) … The component names to ignore. Sets the component name to allow.
ignores: ["Todo"]
📚 Further Reading
- Style guide — Multi-word component names
🚀 Version
This rule was introduced in eslint-plugin-vue v7.20.0
🔍 Implementation
- Rule source
- Test source
| pageClass | sidebarDepth | title | description | since |
|---|---|---|---|---|
|
rule-details |
0 |
vue/multi-word-component-names |
require component names to be always multi-word |
v7.20.0 |
vue/multi-word-component-names
require component names to be always multi-word
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential","plugin:vue/essential","plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended".
📖 Rule Details
This rule require component names to be always multi-word, except for root App
components, and built-in components provided by Vue, such as <transition> or
<component>. This prevents conflicts with existing and future HTML elements,
since all HTML elements are single words.
/* ✓ GOOD */ Vue.component('todo-item', { // ... }) /* ✗ BAD */ Vue.component('Todo', { // ... })
<script> /* ✓ GOOD */ export default { name: 'TodoItem', // ... } </script>
<script> /* ✗ BAD */ export default { name: 'Todo', // ... } </script>
<!-- filename: Todo.vue --> <script> /* ✗ BAD */ export default { // ... } </script>
<!-- filename: Todo.vue --> <!-- ✗ BAD --> <script setup> // ... </script>
<!-- filename: TodoItem.vue --> <!-- ✓ GOOD --> <script setup> // ... </script>
<!-- filename: Todo.vue --> <!-- ✓ GOOD --> <script setup> // ... </script> <script> export default { name: 'TodoItem' } </script>
🔧 Options
{
"vue/multi-word-component-names": ["error", {
"ignores": []
}]
}
ignores(string[]) … The component names to ignore. Sets the component name to allow.
ignores: ["Todo"]
<script> export default { /* ✓ GOOD */ name: 'Todo' } </script>
<script> export default { /* ✗ BAD */ name: 'Item' } </script>
<!-- filename: Todo.vue --> <!-- ✓ GOOD --> <script setup> // ... </script>
📚 Further Reading
- Style guide — Multi-word component names
🚀 Version
This rule was introduced in eslint-plugin-vue v7.20.0
🔍 Implementation
- Rule source
- Test source
Gayathri R
Posted on Apr 22, 2022
• Updated on Jul 3, 2022
Problem:-
While running the VueJs application failed with «Multi-word vue/multi-word-component-names» error.
/home/user/tutorials/animations-vuejs/src/components/HelloWorld.vue
35:9 error Component name "hello" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
Enter fullscreen mode
Exit fullscreen mode
Solution:-
This problem is due to the ‘eslint’ setting issues. By default, the linting rule is enabled in Vuejs (Default ([Vue 3] babel, eslint)).
You can resolve this problem in two ways,
Method — 1:
Rename the component name. Here in this case the component name provided is ‘hello’, you can change this as a multi-word like ‘HelloWorld’.
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
Enter fullscreen mode
Exit fullscreen mode
Method — 2:
Disable the linting rule. By disabling the ‘eslint’ execute the below command.
$ npm remove @vue/cli-plugin-eslint
Option 1: Disable globally
To disable the rule in all files (even those in src/components):
// <projectRoot>/.eslintrc.js
module.exports = {
?
rules: {
'vue/multi-word-component-names': 0,
},
}
Option 2: overrides in ESLint config for src/views/
To disable the rule only for src/views/**/*.vue, specify an overrides config:
// <projectRoot>/.eslintrc.js
module.exports = {
?
overrides: [
{
files: ['src/views/**/*.vue'],
rules: {
'vue/multi-word-component-names': 0,
},
},
],
}
Note: If using VS Code with the ESLint Extension, restarting the ESLint Server (through Command Palette’s >ESLint: Restart ESLint Server command) or restarting the IDE might be needed to reload the configuration.
Option 3: Directory-level config for src/views/
It’s also possible to disable the rule for src/views/**/*.vue with an .eslintrc.js file in that directory:
// <projectRoot>/src/views/.eslintrc.js
module.exports = {
rules: {
'vue/multi-word-component-names': 0,
},
}
For those still having this issue, add the following under rules in the .eslintrc.js file
rules: {
...
'vue/multi-word-component-names': 0,
}
There’s a simple solution. You need define your component name with more than one word as it states. Should be PascalCase as below;
eg: AboutPage.vue
Find a vue.config.js file in the project root directory, create one in the root directory if you don’t have one, write the code marked below, save it, and recompile it. The project will run normally
