This article mainly records the solution of Vue eslint error component name “index” should always be multi word Vue/multi word component names.

1.  Reason for error reporting

Create a project using the latest Vue-cli. When NPM run serve runs the project, an error is reported, as shown in the following figure.

The reason is that the eslint-plugin-vue version has been updated, and compared to the previous version, there are many new rules in the @8 version, the first one is ‘vue/multi-word-component-names’: ‘error’, which requires component names to be named in camel format, so index.vue will report an error.

2. Solutions

• Follow the rules and use camel naming, e.g. AppHeader.vue
• Turn off the naming convention in the .eslintrc.js file

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "vue/multi-word-component-names": [
      "error",
      {
        ignores: ["index"], //Component names to be ignored
      },
    ],
  },
};