Is it possible to do without prefixes in Vue.js component names?

Question

HTML

The vue.js style guide says that component names should only be 2 or more words in order to avoid conflicts with inline html element names. For the sake of this, one has to fence here such a crap:



Is it possible to somehow avoid this? For example, it seems to me a much more logical option using PascalCase for all custom components and kebab-case for all built-in elements. Is it possible to fix this rule somewhere at the compilation level of .vue components?

Answer 1

Of course you can avoid it, rules are meant to be broken.)
Personally, I like to name files in kebab-case and use components inside templates in kebab-case. Just because it looks aesthetically much nicer and fits into the html structure.
You could safely spit on collisions: if you named your component the same way as some newfangled html tag that you have not heard of, then you don’t need this tag, but this could break third-party components.
I personally just use a single letter prefix.
You can enforce filenames at the project level, for example, using plugins for eslint: eslint-plugin-filenames .
PS The only thing: even if you use PascalCase to name the component - Vue will still look for the kebab-case version as well, which is done for convenience. So as a way to avoid collisions, it won't work.