More than 3 years have passed since last update.

Require self-closing on Vue.js custom components (<〇〇>).の解決方法

Last updated at 2020-10-25Posted at 2020-10-25

ESLintを導入後にRequire self-closing on Vue.js custom componentsという警告が出たので解決方法を記載しておきます。

app.vue

<template>
  <v-app id="app">
    <Header></Header>
    <Todolist></Todolist>
  </v-app>
</template>

上記のコードで以下のような警告出ました。

警告

Require self-closing on Vue.js custom components (<Header>).
Require self-closing on Vue.js custom components (<Todolist>).

原因は開始タグと終了タグの間に何も記載がないのが理由ですが、
今回はタグの間に何も書く必要が無いので別の解決方法を使います。

app.vue

<template>
  <v-app id="app">
    <Header />
    <Todolist />
  </v-app>
</template>

このように自己終了タグを使うと警告が出なくなります。

参考
[https://kojimanotech.com/2019/09/22/187/]