Single Root Element in Vue Components

While building your VueJS components. It’s important to note that you should have a Single Root Element as part of the Component template.

Let’s see what that means by and example.

We’ll build a very basic component that has an input box and below the input box, we show the user whatever he typed into the input box. Basic v-model binding.

Here is how the component looks

Livewire Component Library
    Vue.component('input-binding',{
        template : `<input type="text" v-model="name"/> 
                        <p>Your Name is {{name}}</p>`,

        data() {
            return {
                name: 'Tushar',
            }
        } 
    });

Notice that we have used a literal string to define our template using the backtick. Along with this we also define a Basic Vue instance and mount it to the app id inside HTML.

Get special discount by using coupon code 5Balloons for hosting your Laravel / Wordpress websites on Digital Ocean using Cloudways. Follow this Cloudways Affiliate URL to apply the discount code and get the offer

We can now use the component element in our HTML.

    <div id="app">
          <input-binding></input-binding>
    </div>

This will not work and will throw the following error in your console.

This is because every Vue Component must have a single root element in its template. In our case we have two elements at the root one is input and another is p tag.

Fixing this is simple, you can wrap the whole template of a Component inside a div tag. In our case, we will modify our component to look like this.

    Vue.component('input-binding',{
        template : `<div>
                        <input type="text" v-model="name"/> 
                        <p>Your Name is {{name}}</p> 
                    </div>`,

        data() {
            return {
                name: 'Tushar',
            }
        } 
    });

That’s all about Components having Single Root Element in VueJS.

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer