Does a Vuejs component template need only root one element?

Question

I did not saw anything about this in docs, maybe I did not search enough, but components template seems to work "better" with a root element (better means: it works without root element with Laravel elixir running gulp but running gulp --production displays only the first element).

Do I need to have only one root element inside <template>?

In other words, is this template code allowed in Vue 2?

<template>
  <div>A</div>
  <div>B</div>
</template>

Answer 1

Every component must have exactly one root element. Fragment instances are no longer allowed. If you have a template like this:

<p>foo</p>
<p>bar</p>

It’s recommended to simply wrap the entire contents in a new element, like this:

<div>
  <p>foo</p>
  <p>bar</p>
</div>

VueJS Docs

Answer 2

It may compile, but Vue will throw you out the following warning:

[Vue warn]: Component template should contain exactly one root element:

And only show the first element in the template, so you have to make sure you wrap your template in one root level tag like so:

<template>
  <div>
    <div>A</div>
    <div>B</div>
  </div>
</template>

If you look in the developer tools console on the following JSFiddle you should see what I mean:

https://jsfiddle.net/woLwz98n/

I'll also take the chance to thank you for your laravel-log-viewer, I use it all the time and it's excellent!