What is the correct name for the components?

Question

Vue.js

1) The styleguide vue says that components should be described in 2-3 words to avoid collisions with html tags, and I had a problem with Footer.vue. Is it possible to name the component(File) itself AppFooter.vue? or in such cases it is better to name the component Footer.vue(Without App) and when importing in another component, add the app prefix: 2) What is the best name for the components? Vue itself, when deploying a project, names all components with a capital letter. But I saw that some people write with a small letter and with the v- prefix, but I did not find it in the documentation. Is it normal to write components with a small letter and with the v- prefix, and where can I read about it? 3) How to deal with components for which it is difficult to come up with a two-word name? Can they be prefixed with app? For example like this:

import appFooter from "@/components/Footer";

Answer 1

Is it possible to name the component(File) itself AppFooter.vue?

Yes, it's a perfectly reasonable name. In general, you must follow the rule that the name of the component does not match existing html tags.

or in such cases it is better to call the component Footer.vue (Without App) and when importing in another component, add the app prefix

And why these difficulties? Name it AppFooter right away .

Vue itself, when deploying a project, names all components with a capital letter. But I saw in the video that some people write with a small letter

IMHO it depends on the codestyle in the project. How convenient - and write. I personally prefer capital letters. VSCode then highlights in a different color and it is easier for the eye to navigate the markup.

Is it normal to write components with a small letter and with the v- prefix, and where can I read about it?

I don’t know where to read, but it’s hardly worth adding prefixes. This is done when developing some UI libraries in order to clearly understand that the component belongs to them. For example, Vuetify has v- , BootstrapVue has b- , and so on.