Why does the "Failed to mount component" error occur?

K

karpo5182019-09-11 16:25:33

Vue.js

karpo518, 2019-09-11 16:25:33

I'm doing a Laravel + vuejs demo project on a local Apache server.
Created 2 components: App and Home. I run yarn run watch and open the page. I get a blank page

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>

It is not clear what component cannot be mounted and why. Googled by mistake. Found that it occurs if require() does not add default. But I don't use require except in webpack.mix.js. There I have this:

webpack.mix.js

let 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');

I tried adding default. Did not help. What is the reason for such an error? Almost all code is copied from here

/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.js

import 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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

G

Grigory Tumakov, 2019-10-25
@VokaMut

This is all because of VueRouter, you need to initialize it in /resources/assets/js/app.js like this:

const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'home',
            component: require('./components/Home.vue').default
        },
    ]
});