Vue: <tag></tag> vs <tag />

Question

In the Vue documentation, I have seen opening and closing tags, but I've seen in other places where authors write components as self closing tags, like <some-component />

Is the practice of self-closing tags legal in Vue?

Answer 1

From the Vue style guide:

Components with no content should be self-closing in single-file components, string templates, and JSX - but never in DOM templates.

It's legal and strongly recommended by the Vue style guide: Vue Style Guide #self-closing components

Answer 2

Both the questions are answered above. But, I would like to point out what exactly is meant by no content in self closing tags.

1. When we use <div><p>Something</p></div>, <p> tag here is the content and hence, we cannot use div as a self closing tag.

2. Similarly in case of Vue JS components, you can also include content inside the component tags. e.g., <MyComponent><p>Something Else</p></MyComponent>. Then, in the component definition of <MyComponent>, you have to includes to render the content passed wherever <MyComponent> is used.

3. If you intend to not have any content to be passed from the <MyComponent>. i.e. If you do not have the <slot> tag in the definition of your component, then your <MyComponent> can be a self closing tag.