[Vuejs]-Laravel – [Vue warn]: Failed to mount component: template or render function not defined

by

0👍

From bootstrap.js delete import VueRouter from 'vue-router'; and Vue.use(VueRouter); and add Router plugin to Vue inside of routes.js file and edit it as below: 

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
export default new VueRouter({
    routes: [
        {
            path: '/',
            component: require('./views/Home.vue')
        }
    ]
});

app.js is correct. I have implemented and tested this everything worked as expected.

0👍

This is what I did to fix my own issue.

Add .default to require('./components/ExampleComponent.vue') Like so require('./components/ExampleComponent.vue').default

0👍

Replace all webpack resolve aliases with relative paths

I stubmled across an issue where the the webpack [chunkhash] placeholder in the output.chunkFilename webpack option causes an issue

Modifying webpack optimization.splitChunks.chunks option

const mix = require('laravel-mix');
const fs = require('fs');
const webpack = require('webpack');
const tailwind = require('tailwindcss');
const path = require('path');
const glob = require('glob');
const exec = require('child_process').exec;
const pwa = require('sw-precache-webpack-plugin');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js',
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
});

mix.version();

// ...

mix.js('resources/js/app/app.js', 'public/js/app.js');

Leave a comment