Self-closing component tags

[karevn]

How about allowing self-closed component tags like <my-component />? Currently, it does not work.

[yyx990803]

Vue templates need to be valid HTML. There are no "self closing tags" in HTML5, it's an XHTML syntax which is now outdated and you should never use it. See http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5

[CodeOfDavid]

I didn't see this in the component documentation, which caused me a little time wasting. It would be good to add it.

[ediamin]

How about set an option like void_element: true to allow this? Like this:

<div id="demo">
    <my-component>
</div>

<script>
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>',
  void_element: true // allow the template to be a void element
});

Vue.component('my-component', MyComponent)
</script>

[CodeOfDavid]

I think yyx990803 is saying something far more fundamental. He doesn't want to go against HTML5

[karevn]

@ediamin actually, @CodeOfDavid he actually can't go against HTML5, as Vue uses browser's built-in HTML parser. I did not know that when posted this issue.

[asumaran]

it would be great if this is mentioned somewhere in the documentation.

[phanan]

@asumaran See http://vuejs.org/guide/components.html#Template-Parsing:

Vue.js template engine is DOM-based and uses native parser that comes with the browser instead of providing a custom one. There are benefits to this approach when compared to string-based template engines, but there are also caveats. Templates have to be individually valid pieces of HTML.

[harbulot]

@yyx990803

Vue templates need to be valid HTML. There are no "self closing tags" in HTML5, it's an XHTML syntax which is now outdated and you should never use it. See http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5

Using tags that are self-closing is not invalid HTML5, though. (As far as I know, <br /> is valid HTML5, for example.) Even the SO question you link to doesn't say they should never be used. Being able to handle valid XHTML (or at least well-formed XML) can actually be quite important, since there are still a few good server-side template engines and other tools that rely on XML (and XHTML). XML can actually help with structure and pre/post-processing (depending on the overall build environment).

[fnlctrl]

@harbulot FYI self-closing tags works in 2.0 as long as you don't use in-dom templates.

[alexsasharegan]

@fnlctrl Is this because templates are converted to render functions? So we can use self-closing tags when compiling vue (single file components)?

[RobertBColton]

@alexsasharegan I too would like to know the answer to your question.

[Akryum]

It works with vue-loader and .vue files.

[RobertBColton]

I see, thank you, now I suppose part of the confusion results from use of the term "string template"

The documentation seems to be inconsistent because the following implies that they are only templates defined as string literals: https://vuejs.org/v2/guide/single-file-components.html

However, the following defines a string template as a single-file component too: https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

It seems as though a number of individuals are confused by this: https://www.google.com/#q=vuejs+%22string+templates%22

Perhaps the docs could be changed to kind of clear up this confusion?

[Akryum]

It should also work with the template-compiler included in the full build of Vue that compiles string templates into render functions (which is the same code used by vue-loader). Basically, the issue the OP had is the browser parsing the HTML before Vue had a chance to read it when using inline templates.

Vue.component('test', {
  template: '<div><my-component/></div>',
})

[LinusBorg]

String templates should probably be defined kind of like "Any template not defined in the DOM". But that could confuse people why <script type="x-template"> templates in the DOM are string templates, too...

Not easy to get right ^^

[zukilover]

I consider Vue components to be HTML5 foreign elements.

[sheriffderek]

I certainly don't mind adding the closing tag - but as a newcomer to Vue - I spent a few hours second guessing myself and pulling my project apart trying to figure out what was wrong. Because I've been using components like this {{compoent-name}} or <ComponentName /> in other projects - where there is no outlet or slot content / I just didn't even think about that.

https://vuejs.org/v2/guide/components.html

Example: https://codepen.io/sheriffderek/pen/rQGLve

[Pezhvak]

it just works now, anybody here to give advice on using it or not?

[LinusBorg]

It works ever since Vue 2.0, because that version uses a virtual dom.

The only exception are templates that are defined in an actual .html document.

[pedrokermitgoncalves]

@LinusBorg / @yyx990803, My question here is, in your opinion, should we be using self-closed component tags or not?

1:

<template>
    <dummy-component></dummy-component>
</template>

2:

<template>
    <dummy-component />
</template>

Option 1 or 2?

[posva]

Please check https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

I'm locking this as it is a resolved old thread