Vue.jsで、「Component template should contain exactly one root element.」エラーが出た時の原因と対応

エラー内容

このエラーは、「コンポーネントにはルート要素が必要です」というエラーです。

Vueコンポーネントをテンプレート側に書いている際に、HTML親要素がないところでコンポーネントを呼び出していると発生します。

エラーコード例と対処

テンプレートに下記のようなコードがあったとします。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
  <form-a />
</template>

この場合、「<form-a />」にはHTMLの親要素がありません。<template>タグはVueの内部タグなので、親要素にはなりません。

単純に、HTML親要素の中に入れてあげればいいので、

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form-a />
  </div>
</template>

として、div要素の中に入れることで、「Component template should contain exactly one root element.」エラーを解消することができます。

単純なエラーですが、Vue.jsの仕組みがわかっていないと理解ができないところなので、「コンポーネントにはHTML親要素が必要」ということを覚えておきましょう。