search

bencodezen / vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
7.77k stars 1.32k forks source link

vue/component-name-in-template-casing conflict with bootstrap-vue #120

Closed frozonfreak closed 5 years ago

frozonfreak commented 5 years ago

Cannot use bootstrap-vue framework due to conflict. vue/component-name-in-template-casing is set to PascalCase , while bootstrap-vue is defined in kebab-case.

Reproduction steps,

  1. Include bootstrap-vue
  2. Add any bootstrap-vue component into template
  3. compile
chrisvfritz commented 5 years ago

In .eslintrc.js, you should see a list of ignored element names:

'vue/component-name-in-template-casing': [
  'error',
  'PascalCase',
  {
    ignores: [
      'component',
      'template',
      'transition',
      'transition-group',
      'keep-alive',
      'slot',
    ],
  },
],

You can add the names of any bootstrap-vue components you want to use to that list, disable the rule completely, or update to use kebab-case if you prefer. I'd also recommend opening an issue on bootstrap-vue to register all their components using PascalCase, as that will make components usable with both PascalCase and kebab-case.