Nuxt.jsで「render function or template not defined in component」

Nuxt.jsの勉強をしていたところ、

render function or template not defined in component: 

のエラーが発生。

手順を追って解説してくれているサイト（ https://liginc.co.jp/449575 ）の通りに写経しているのに、なぜ、、、
と思いつつ、調べて解決しました。

Nuxt.jsのバージョンは v.2.8.1 です。

先に結論

コンポーネントにHTMLを書くなら、template要素の中に書く必要がある。

エラー内容と解決策

components/common/TheHeader.vue
components/common/TheFooter.vue
という２つのコンポーネントを書いたあと、
layouts/default.vue
の中身を、その２つのコンポーネントを呼び出すように書き換えたところで、エラー発生。

render function or template not defined in component: TheHeader

エラー時点での各ファイルの内容

TheHeader.vue

<header class="header">
<div class="header-inner">
    <h1>my-portfolio</h1>
    自己紹介
  </div>
</header>

TheFooter.vue

<footer class="footer">© my-portfolio.</footer>

それぞれ、こうしたらエラーが解消されました。

TheHeader.vue

<template>
<header class="header">
<div class="header-inner">
    <h1>my-portfolio</h1>
    自己紹介
  </div>
</header>
</template>

TheFooter.vue

<template>
<footer class="footer">© my-portfolio.</footer>
</template>

おわりに

当たり前のことではありますが、エラーメッセージが最大のヒントですね。
今回も「render function か template が componentの中に定義されてないよ」と出ているわけなので。