Search code examples
gulpvue.jslaravel-elixirvuejs2

Does a Vuejs component template need only root one element?


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>

Solution

  • 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