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のインストールはこちら

エラーコード

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

<template>
    <div class="test">
        <h1>{{ msg }}</h1>        
    </div>
    <h1>エラーでます</h1>
</template>

原因

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

対処法

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

<template>
    <div class="test">
        <h1>{{ msg }}</h1>
　　　　 <h1>エラーでません</h1>        
    </div>
</template>