Vue.jsのチュートリアルを進めていたらcomponentのところでハマった話

ここ最近管理画面系のサイトを作ることが多く、そろそろフレームワークでも導入したいなという気持ちが高まってまいりました。ReactやAngularをバリバリ使いこなせたら素敵だなと思いつつも、実際にそれらが必要になるほど大規模な開発ってあまりないんですよね。もっと簡易的なもので事足りちゃう。

というわけでVue.jsのお勉強を始めたのですが、しょっぱなのチュートリアルで詰まったところがあったので、同じような境遇に陥った人のため、そして自分自身のメモのために解決方法を書いておこうと思います。

ハマったところ

Vue.jsを勉強し始めた人が最初に出会うであろう公式サイトのチュートリアル、はじめにの「コンポーネントによる構成」のところ。書いてある通りに

<ol>
  <todo-item></todo-item>
</ol>

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
});

とやってもVue.jsによるレンダリングが行われない……。consoleにエラーも出ないので原因が分からずしばらくハマりました。

解決方法

なんでだろうなと思ったら公式サイトのコンポーネントの項目に理由が書いてありました。

一度登録すると、コンポーネントはカスタム要素 として親のインスタンスのテンプレートで使用できます。コンポーネントが root の Vue インスタンスをインスタンス化する前に登録されているか確認してください。 via - コンポーネント - Vue.js

ここに書いてある通り、コンポーネントを使うためには、その親をVueインスタンス化しておく必要があったみたいです。

これに従ってHTML側でidを振り

<ol id="list">
  <todo-item></todo-item>
</ol>

jsにインスタンス化する処理を追記します。

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
});

// ここ追記
new Vue({
  el: '#list'
});

これでVueのコンポーネントが動くようになりました！

それにしてもVue.jsは日本語のドキュメントがあっていいですね。サイトも見やすいしとっつきやすい。引き続きチュートリアル進めて何か作ってみるところまでやってみたいと思います。

Vue.js