Делаю демо-проект Laravel + vuejs на локальном сервере Apache.
Создал 2 компонента: App и Home. Запускаю yarn run watch и открываю страницу. Получаю пустую страницу
app.js:883 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <App> at resources/assets/js/App.vue
<Root>
Что за компонент не может смонтироваться и почему, непонятно. Гуглил по ошибке. Находил, что она возникает, если у require() не дописать default. Но я не использую require кроме как в webpack.mix.js. Там у меня вот что:
webpack.mix.jslet mix = require('laravel-mix');
const { VueLoaderPlugin } = require('vue-loader');
mix.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
plugins: [
new VueLoaderPlugin()
],
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Пробовал добавлять туда default. Не помогло. В чём причина такой ошибки? Практически весь код скопирован
отсюда/resources/assets/js/App.vue<template>
<div class="panel panel-default">
<div class="panel-heading">
<nav>
<ul class="list-inline">
<li>
<router-link :to="{ name: 'home' }">Home</router-link>
</li>
<li class="pull-right">
<router-link :to="{ name: 'login' }">Login</router-link>
</li> <li class="pull-right">
<router-link :to="{ name: 'register' }">Register</router-link>
</li>
</ul>
</nav>
</div>
<div class="panel-body">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
/resources/assets/js/components/Home.vue<template>
<h1>Laravel 5 Vue SPA Authentication</h1>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
/resources/assets/js/app.jsimport Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './components/Home.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
]
});
new Vue({
el: '#app',
router: router,
render: app => app(App)
});
/resources/views/welcome.blade.php<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="/js/app.js"></script>
</body>
</html>
