How to name vue components
vue-component, vue.js
Solution
You can check this Vue.js Component Style Guide
From the guide:
Vue Component Names
Each component name must be:
- Meaningful: not over specific, not overly abstract.
- Short: 2 or 3 words.
- Pronounceable: we want to be able talk about them.
Vue component names must also be:
- Custom element spec compliant: include a hyphen, don't use reserved names.
- app- namespaced: if very generic and otherwise 1 word, so that it can easily be reused in other projects.
Why?
The name is used to communicate about the component. So it must be short, meaningful and pronounceable.
How?
<!-- recommended -->
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>
<!-- avoid -->
<btn-group></btn-group> <!-- short, but unpronounceable. use `button-group` instead -->
<ui-slider></ui-slider> <!-- all components are ui elements, so is meaningless -->
<slider></slider> <!-- not custom element spec compliant -->
Problem
I have four components: `comments.vue`, `comments-list.vue`, `comment.vue`, `comment-new.vue`. `comments.vue` uses other components to display: List of comments (does not have any ajax calls) a. Which contains single comment (basically it's just a template with single property) Textarea to send comment (has ajax calls) `comments.vue` has all logic to load paginated comments So my question is: is it good separation of responsibilities?