19

Is there a way to stop getting error from ESLint for single word view name in Vue3?

Every time I run ESLint, I get following message:

  1:1  error  Component name "About" should always be multi-word  vue/multi-word-component-names

I currently have this setup:

file structure:

├── index.html
├── node_modules
├── npm
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   └── Menu.vue
│   ├── env.d.ts
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   └── views
│       ├── About.vue
│       └── Home.vue
├── tsconfig.json
└── vite.config.ts

.eslintrc:

{
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2021
    },
    "rules": {}
}

package.json

{
...
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .ts,vue --ignore-path .gitignore ."
  },
...
}
3
  • 1
    Add the configuration you want into the .eslintrc? There's extensive guidance in the docs: eslint.org/docs/user-guide/configuring. But the Vue style guide describes that one as "essential": vuejs.org/v2/style-guide/#Multi-word-component-names-essential, which is why it's in that preset.
    – jonrsharpe
    Commented Dec 14, 2021 at 9:51
  • @jonrsharpe That was my initial idea, but as you say in "Components" it is essential. But from my understanding this does not include views as even vue-cli generates them with single-word names as you do not use them as tags in your code...
    – Tomkys
    Commented Dec 14, 2021 at 10:31
  • @Tomkys The only Component that is (should be) one word is App.vue - with the new update the generated components are also Multi-Word i bleieve
    – h0p3zZ
    Commented Apr 27, 2022 at 20:17

7 Answers 7

52

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

For those still having this issue, add the following under rules in the .eslintrc.js file

rules: {
  ...
  'vue/multi-word-component-names': 0,
}
1
  • 3
    my eslint config rules were listed under package.json, and I had to restart VS Code for the change to take effect
    – Prid
    Commented Jun 2, 2022 at 14:56
6

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

2

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

vue.config.js

2

Change your component name from About to AboutView

This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.

Bad

<!-- in pre-compiled templates -->
<Item />

<!-- in in-DOM templates -->
<item></item>

Good

<!-- in pre-compiled templates -->
<TodoItem />

<!-- in in-DOM templates -->
<todo-item></todo-item>
0

If you're using the latest version of ESLint (9+) and your configuration file is eslint.config.js, you can use the following config:

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

here is an example of a full configuration setup

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';

export default [
 {files: ['**/*.{js,mjs,cjs,ts,vue}']},
 {languageOptions: {globals: globals.browser}},
 pluginJs.configs.recommended,
 ...tseslint.configs.recommended,
 ...pluginVue.configs['flat/essential'],
 {files: ['**/*.vue'], languageOptions: {parserOptions: {parser: tseslint.parser}}},
 {
  ignores: ["dist/*", "public/*"]
 },
 {
  rules: {
   'vue/multi-word-component-names': 'off'
  }
 }
];
-1

You can just run this command and it will automatically fix the issue by removing the plugin itself:

npm remove @vue/cli-plugin-eslint

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.