🗂

vue.js SFC内のコンポーネントタグはパスカルケースで統一したい

2021/06/12に公開

公式ドキュメントがわかりにくい表現なのもあって
SFCの中で <some-component /> って書く人をけっこう見かける。

ちがうんだ。
ケバブケースで書く必要があるのは「DOMテンプレートの中」なんだ。
.htmlファイルの中でbodyタグ内にvueをベタで書く時だけケバブケースになる。

hoge.html

<body>
  <div id="app">
    <some-component />
  </div>
</body>

.vueファイルのときはパスカルケースでOK。

hoge.vue

<template>
  <SomeComponent />
</template>

経験上、importするコンポーネント名でそのままtemplate内を検索できる利便性は高い。