ESLint Vue multiword components

Question

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

Bruns

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. – Weathertight

@Weathertight 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... – Bruns

@Bruns 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 – Ocarina

Answer 1

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

Sensorium

Answer 2

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

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

Ebonee

my eslint config rules were listed under package.json, and I had to restart VS Code for the change to take effect – Erdda

Answer 3

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

Romola

Answer 4

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

Redintegrate

Answer 5

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>

Kebab

Answer 6

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'
  }
 }
];

Laquanda

Answer 7

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

npm remove @vue/cli-plugin-eslint

Murguia