【Nuxt 3】template内は単一のルート要素でなければ駄目らしい

はじめに

タイトルの通りです。
Nuxt3でサイトを構築している際にエラーに遭遇したのですが、それが「template内は単一のルート要素じゃないと、ナビゲーション時にエラーが発生するよ」という内容でした。以下がエラー文です。

about does not have a single root node and will cause errors when navigating between routes

極めて初歩的なものかと思われて大変お恥ずかしいのですが、学習を始めたばかりだと意外とつまづくポイントでもあるのかなと...
自分と同じくNuxt3の初学者の助けになれば幸いと思い、備忘録も兼ねてまとめておきます。

NG

pages/about.vue

<template>
    <h1>About Page</h1>
    <p>これはaboutページです</p>
</template>

template直下にh1とpが連なっていますが、この状態ではエラーが出ます。どうやら、template直下に複数の要素があるとダメらしいんですよね。

OK

pages/aboue.vue

<template>
    <div>
        <h1>About Page</h1>
        <p>これはaboutページです</p>
    </div>
</template>

template直下のdivに全てのコンテンツを閉じ込めました。こちらでOKです

終わりに

「templateタグ直下に複数要素は置けないので、直下に一つタグを置きその中に要素を書いていく」ということを把握しておけばOKかと。
それでは！