Defining component names and using naming conventions

We have seen and created many components in this and the previous chapters. The more components we make, the more we need to follow naming conventions for our components. Otherwise, we will inevitably get confused and come across errors, bikeshedding, and anti-patterns. Our components will inevitably conflict with each other – even with the HTML elements. Luckily, there is an official Vue style guide that we can comply with to improve our app's readability. In this section, we'll go through a few that are specific to this book.

Multi-word component names

Our existing and future HTML elements are single words (for example, article, main, body, and so on), so to prevent conflicts from occurring, we should use multi-words when naming our components (except for the root app components). For example, the following is considered bad practice:

// .js
Vue.component('post', { ... })

// .vue
export default {
  name: &apos...