vue
vue.js
vue.js2

[Vue.js] htmlタグと重複するコンポーネント名の命名規則をどうするか

Vue.jsでコンポーネントを作成するときにHeader.vueなどhtmlタグとかぶってしまうコンポーネント名をつけたいときにどうすれば良いのか困ったので調べてみました。

調べた限りだと以下の3つのパターンが存在します。

1. htmlタグとかぶるコンポーネントはそもそも作らない

Vue.jsの公式でも紹介されているvue-hackernews-2.0をみて見ると、headerなどのhtmlと被りそうなコンポーネントは存在しません。

https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/App.vue

個人プロジェクトや小規模の案件だと問題なさそうですが、ヘッダーやフッターをコンポーネントに切り出したい場合もあると思うのでちょっと微妙です。

2 . AppNameHeader.vueのようにprefixをつける

AppAppName のようにprefixをつければhtmlタグとの名称の衝突を回避できます。

ただ、すべてのコンポーネントにprefixをつけるのもめんどくさく、htmlタグと重複するものだけにprefixをつけるのも微妙ですね・・・

3. htmlタグと重複したコンポーネント名を許容しつつコンポーネントを読み込むときに任意の名前をつける

Header.vue を作成して、コンポーネントを読み込むときに v-header などとします。
App.vueを以下のようにするイメージです。

<script>
import Header from '@/components/Header'
export default {
  name: 'app',
  components: {
    'v-header': Header
  }
}
</script>

AppNameHeader.vueのようにprefixをつける

と発想は同じですが、こちらの方がコンポーネント名もすっきりするので今のところこの方法が1番良いかなと思っています。( v- とするとVue.jsの機能かな?と読み手が感じるケースがあるかもしれません)

この3つ以外の方法があったり、これがベストプラクティスだ!という方法があれば教えて欲しいです。


この記事は[Vue.js] htmlタグと重複するコンポーネント名の命名規則をどうするかからの転載です。