公開日:11/20/2020  更新日:3/26/2022

  • twitter
  • facebook
  • line

【Nuxt.js】Component template should contain exactly one root element.

事象

コンポ―ネントテンプレートを作成した際に下記のエラー発生。

該当のエラー

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

翻訳

コンポーネントエレメントには、ルートエレメントを1つだけ含める必要があります。もし、複数のエレメントで v-if ディレクティブを使用しているなら、代わりにv-else-if を使用して まとめて下さい。

原因

原因はエラーコードの指摘のままでした。

./componets/sidevar.vue

<template>
    <h1>おすすめ記事</h1>
      <nuxt-link :to="'blog/d6_mxl1zs'">
      <h2>Nuxt.js , microCMS  ,Netlify の組み合わせでJAMstackなブログ開発</h2>
    </nuxt-link>
</template>

div タグの入れ忘れですね。。orz

解決したコード

div タグ を外側に追加して解決!

<template>
 <div>
      <h1>おすすめ記事</h1>
      <nuxt-link :to="'blog/d6_mxl1zs'">
      <h2>Nuxt.js , microCMS  ,Netlify の組み合わせでJAMstackなブログ開発</h2>
      </nuxt-link>
    </div>
</template>

久々にnuxt.js を触ったので基本的なルールを失念しておりました。精進します。。

戻る