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'); });
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>
ExampleComponent.vue
<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);
Advertisement
Answer
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.