'ESLint Vue multiword components

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


Solution 1:[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,
  },
}

Solution 2:[2]

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

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

Solution 3:[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

Solution 4:[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

vue.config.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kusaasira Joshua
Solution 3 Parinda Rajapaksha
Solution 4 Brayan Aguilar

Related Questions