Vue js error: Component template should contain exactly one root element

Note This answer only applies to version 2.x of Vue. Version 3 has lifted this restriction.

You have two root elements in your template.

<div class="form-group">  ...</div><div class="col-md-6">  ...</div>

And you need one.

<div>    <div class="form-group">      ...    </div>    <div class="col-md-6">      ...    </div></div>

Essentially in Vue you must have only one root element in your templates.

For a more complete answer: http://www.compulsivecoders.com/tech/vuejs-component-template-should-contain-exactly-one-root-element/

But basically:

• Currently, a VueJS template can contain only one root element (because of rendering issue)
• In cases you really need to have two root elements because HTML structure does not allow you to create a wrapping parent element, you can use vue-fragment.

To install it:

npm install vue-fragment

To use it:

import Fragment from 'vue-fragment';Vue.use(Fragment.Plugin);// orimport { Plugin } from 'vue-fragment';Vue.use(Plugin);

Then, in your component:

<template>  <fragment>    <tr class="hola">      ...    </tr>    <tr class="hello">      ...    </tr>  </fragment></template>

You need to wrap all the html into one single element.

<template>   <div>        <div class="form-group">            <label for="avatar" class="control-label">Avatar</label>            <input type="file" v-on:change="fileChange" id="avatar">            <div class="help-block">                Help block here updated 4 🍸 ...            </div>        </div>        <div class="col-md-6">            <input type="hidden" name="avatar_id">            <img class="avatar" title="Current avatar">        </div>   </div></template><script>    export default{        methods: {            fileChange(){                console.log('Test of file input change')            }        }    }</script>