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,
},
}
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
| 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