Vue.js エラー「Component template should contain exactly one root element」の原因と対応方法

Vue.js エラー「Component template should contain exactly one root element」の原因と対応方法

.vueコーディング時に、エラーメッセージ「Component template should contain exactly one root element」が出る原因と対処方法です。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • @vue/cli 4.0.5

※ubuntu19.10にnodeのインストールはこちら

エラーコード

下記のコードでエラーが発生

原因

.vueはtemplateタグ内は、全て<div></div>内に記述する必要があるためエラー メッセージ「 Component template should contain exactly one root element(コンポーネントにはルート要素を含める必要があります)」 が表示される

対処法

下記の通りdivタグ内に記述すればエラーはでなくなります