How to deal with vue/multi-word-component-names ?

[laspinacristian]

When using this plugin, components under "pages" are imported created using the filename
However this naming strategy, while working for path in URLs, collide with vue3 recommended rule set for ESLint

Component name "index" should always be multi-word vue/multi-word-component-names

Is there a recommended way to solve this issue?

Thank you

[laspinacristian]

ATM, I turned off the rule only for files inside pages folder only

If someone would stumble upon the same problem. this is my flat config file

// @ts-check
import { readFileSync } from 'node:fs'
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import eslintConfigPrettier from 'eslint-config-prettier'

const eslintAutoImport = JSON.parse(
  readFileSync('./tsconfig/eslint-auto-import.json', { encoding: 'utf8' })
)

export default [
  { languageOptions: eslintAutoImport },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser
      }
    }
  },
/* to solve unplugin-vue-router */
  {
    files: ['src/pages/**/*.vue'],
    rules: {
      'vue/multi-word-component-names': 'off' 
    }
  },
  eslintConfigPrettier
]

[oliverpool]

Based on https://stackoverflow.com/a/41316801/3207406, I created a src/pages/.eslintrc file with the following content:

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

[posva]

That's probably for eslint 8 but it won't work for flat configs

[oliverpool]

You are right, this old config was generated upon vue project creation: vuejs/create-vue#451

[ebisbe]

For anyone interested in a flat configuration you can use:

{
    files: ['src/pages/**/*.vue'],
    rules: {
      'vue/multi-word-component-names': 'off',
    },
  },