[vue/no-multiple-template-root]The template root requires exactly one element.eslint-plugin-vue のエラーの解消方法

VSCodeを利用して、Vue.jsのプロジェクトを管理していると、以下の<template>の記述をした場合エラーが出力される。

テンプレートの記述

<template>
  <Header />
  <Content />
  <Footer />
</template>

エラーの内容

[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue

直訳すると、templateのルートには、一つのエレメントしか含んではいけない。ということらしい。
ということで以下のように修正。

<template>
  <div>
    <Header />
    <Content />
    <Footer />
  </div>
</template>

修正後エラーは消えました。templateタグの直下に空のdivタグを入れるというのは、割と一般的なお作法のようです。

コメント