Vue.js PascalCase・camelCase・kebab-caseの使い分け

Style Guideに命名規約が記載されている。casingに関する項目は以下の4箇所。

Single-file component filename casing

• vueファイルのファイル名はPascalCaseもしくはkebab-caseで統一すること。

MyComponent.vue  // Good
myComponent.vue  // Bad
my-component.vue  // Good

Component name casing in templates

• コンポーネント名はvueファイルや文字列テンプレートではPascalCase、DOMテンプレートではkebab-caseとすべき。（DOMテンプレートではHTMLの規約上kebab-caseが強制される。）
• ただし、既にkebab-caseで統一されているプロジェクトではkebab-caseも許容される。

<!-- vueファイルもしくは文字列テンプレート -->
<MyComponent/>  // Good
<myComponent/>  // Bad

Component name casing in JS/JSX

• コンポーネント名はJS/JSXではPascalCaseとすること。
• ただし、グローバルコンポーネントの登録のみを使うシンプルなアプリではkebab-caseを使ってもよい。（JSからグローバルコンポーネントを参照することは稀で、DOMテンプレートに多く記述されるため。）

import MyComponent from './MyComponent.vue'  // Good
import myComponent from './MyComponent.vue'  // Bad

export default {
  name: 'MyComponent',  // Good
  name: 'my-component',  // Bad

Prop name casing

• 属性（props）名は宣言（JSでのコンポーネント定義）時はcamelCase、HTMLではkebab-caseとすること。

props: {
  myProp: String,  // Good
  'my-prop': String,  // Bad

<MyComponent my-prop="value"/>  // Good
<MyComponent myProp="value"/>  // Bad