JS.VUE.HTML.SELF.CLOSING

Rule Details

This rule aims to enforce the self-closing sign as the configured style.

In Vue.js template, we can use either two styles for elements which don't have their content.

1. <YourComponent></YourComponent>
2. <YourComponent/> (self-closing)

Self-closing is simple and shorter, but it's not supported in the HTML spec.

{'vue/html-self-closing': ['error']}

<template>
  <!-- GOOD -->
  <div/>
  <img>
  <MyComponent/>
  <svg><path d=""/></svg>

  <!-- BAD -->
  <div></div>
  <img/>
  <MyComponent></MyComponent>
  <svg><path d=""></path></svg>
</template>

Options

{
  "vue/html-self-closing": ["error", {
    "html": {
      "void": "never",
      "normal": "always",
      "component": "always"
    },
    "svg": "always",
    "math": "always"
  }]
}

• html.void ("never" by default) ... The style of well-known HTML void elements.
• html.normal ("always" by default) ... The style of well-known HTML elements except void elements.
• html.component ("always" by default) ... The style of Vue.js custom components.
• svg("always" by default) .... The style of well-known SVG elements.
• math("always" by default) .... The style of well-known MathML elements.

Every option can be set to one of the following values:

• "always" ... Require self-closing at elements which don't have their content.
• "never" ... Disallow self-closing.
• "any" ... Don't enforce self-closing style.

html: {normal: "never", void: "always"}

{'vue/html-self-closing': ['error', {html: {normal: 'never', void: 'always'}}]}

<template>
  <!-- GOOD -->
  <div></div>
  <img/>
  <MyComponent/>
  <svg><path d=""/></svg>

  <!-- BAD -->
  <div/>
  <img>
  <MyComponent></MyComponent>
  <svg><path d=""></path></svg>
</template>

Further Reading

• Style guide - Self closing components (https://vuejs.org/style-guide/rules-strongly-recommended.html#self-closing-components)