Error compiling template: Component template requires a root element, rather than just text in vue.js with laravel

I am Learner in Vuejs with laravel, i created a fresh project in laravel, with vue.js frontend. but after run command php artisan serve, when i run project on webbrowser. output is blank. i checked network console, there is also the output showing in example component is blank. please help me to find my mistake.

web.php

    Route::get('/', function () {
        return view('welcome');
    });

JavaScript
​x
 
    Route::get('/', function () {        return view('welcome');    });​​

welcome.blade.php

    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <title>Laravel Vue</title>
    
            <!-- Fonts -->
            <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        </head>
        <body>
            <div id="app">
                <example-component> </example-component>
                <script src="{{ asset('js/app.js') }}"></script>
            </div>
        </body>
    </html>

JavaScript
 
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">        <head>            <meta charset="utf-8">            <meta name="viewport" content="width=device-width, initial-scale=1">                <title>Laravel Vue</title>                <!-- Fonts -->            <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">        </head>        <body>            <div id="app">                <example-component> </example-component>                <script src="{{ asset('js/app.js') }}"></script>            </div>        </body>    </html>​​

ExampleComponent.vue

    <script>
    
    Vue.component('example-component', {
     
      template: `This is the homepage`
    })
    
    new Vue({
         el: '#app'
          })
    </script>

JavaScript
 
    <script>        Vue.component('example-component', {           template: `This is the homepage`    })        new Vue({         el: '#app'          })    </script>​​

app.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    require('./bootstrap');
    
    window.Vue = require('vue');
    
    alert('Alert');
    Vue.component('example-component', require('./components/ExampleComponent.vue').default);

JavaScript
 
    import Vue from 'vue'    import VueRouter from 'vue-router'        Vue.use(VueRouter)        require('./bootstrap');        window.Vue = require('vue');        alert('Alert');    Vue.component('example-component', require('./components/ExampleComponent.vue').default);​​

Answer

Vue.component('example-component', {
  template: `<div id="app">This is the homepage</div>`
})

JavaScript
 
Vue.component('example-component', {  template: `<div id="app">This is the homepage</div>`})​

You have to wrap the template content in a parent element, such as <div> </div>. If not Vue will show an error, explaining that every component must have a single root element.

Advertisement

Answer