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タグを入れるというのは、割と一般的なお作法のようです。
コメント