公式

スタイルガイド - Vue.js

先に決めておくといい事

• 複数単語コンポーネント名は複数単語で利用する
• データプロパティは関数で記載する
• propsプロパティは定義はできるだけ細かく記載する
• v-forの使用時はkey属性を利用する
• v-forと一緒にv-ifを使うのを避ける

優先度A

複数単語コンポーネント名

コンポーネント名は常に複数単語とするべき

全てのHTML要素は一単語となっているため、すでに存在するHTML要素との衝突を避けることをの目的とする

❌

Vue.component('todo', {
  // ...
})

export default {
  name: 'Todo',
  // ...
}

⭕️

Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}