🐛 eslint vue/multi-word-component-names naming limitation for routes

[nicolascalev]

Versions

• nuxt: v2.15.8
• node: v14.15.1

Reproduction

I tried to add a codesandbox link but this is an error during build that would not show on console

Steps to reproduce

1. Create nuxt app
2. Create a single word component, either in /layouts, /components or /pages
3. Check build error, it says error Component name "name" should always be multi-word

What is Expected?

For example if I create pages/home.vue or pages/home/index.vue then I should be able to go to http://localhost:3000/home according to the docs

Also according to docs I should be able to create layouts/default.vue

What is actually happening?

During build it shows the error I mentioned before

If I rename my component to VHome.vue then it works but it's not ideal since that changes my route too

Current workaround

I changed my Nuxt version to v2.15.7 and it worked, it built and the routes were how I wanted. However if I upgrade to the latest version of Nuxt, I can go to .eslintrc.js and set:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  extends: ['@nuxtjs', 'plugin:nuxt/recommended', 'prettier'],
  plugins: [],
  // 🚨 IMPORTANT: this is the config that fixes it at the moment
  rules: {
    "vue/multi-word-component-names": ["error", {
      "ignores": ["default", "home"]
    }]
  },
}

However this is not convenient because I have to put the name of every single file in the array

💖 Thank you for taking the time to review this, lmk if I can provide more information

[der-daniel]

My workaround is to use a .eslintrc.js inside the pages directory with

module.exports = {
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}

See: vuejs/eslint-plugin-vue#245

But I find it sub optimal.

[manniL]

Should be resolved via #190 for now. A better way would be disabling the rule only on the pages subfolder as suggested here

[der-daniel]

What about the layouts folder? Maybe only allowing it on the components folder would be better 😄

[olivervorasai]

You can disable it in /pages and /layouts like this in .eslintrc.js:

module.exports = {
    root: true,
    env: {
        ...
    },
    extends: [
        ...
    ],
    rules: {
        ...
    },
    overrides: [
        {
            files: ['pages/**/*.vue', 'layouts/*.vue'],
            rules: {
                'vue/multi-word-component-names': 'off',
            },
        },
    ],
}

This example file is with .eslintrc.js in your top-level directory, not within the /pages directory.

[nicolascalev]

Thank you all, your comments have been very helpfull