How to name vue components

Question

I have four components: comments.vue, comments-list.vue, comment.vue, comment-new.vue.

comments.vue uses other components to display:

1. List of comments (does not have any ajax calls)

   a. Which contains single comment (basically it's just a template with single property)

2. 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?

Answer 1

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 -->