Components not loading

[vikela]

I followed twice instruction on installing your laravel-starter-kit but unable to load any of the components. I am using Laravel 6. Everything looks ok but cannot load and getting the following Vue errors ..

vendor.js:43683 [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <VContent> <VApp> <Root>

[dadonnik]

I followed twice instruction on installing your laravel-starter-kit but unable to load any of the components. I am using Laravel 6. Everything looks ok but cannot load and getting the following Vue errors ..

vendor.js:43683 [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <VContent> <VApp> <Root>

I resolved this issue by adding '.default' after each component: require(...). So, in admin.js this row Vue.component('moon-loader', require('vue-spinner/src/MoonLoader.vue')); should be changed to Vue.component('moon-loader', require('vue-spinner/src/MoonLoader.vue').default); Furthermore, you should change all rows in the router.js.

[vikela]

Thank you for your respond. I had added the '.default' but still got the same error. I am a bit lost on changing all rows in router.js I have added '.default' in router.js and still my code won't run ?

[dadonnik]

Hi, probably you forgot to change something. Could you try to replace the whole content of 'router.js' to this

import Vue from 'vue';
import Router from 'vue-router';
import store from '../common/Store';

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: '/',
            redirect: '/dashboard',
        },
        {
            name: 'dashboard',
            path: '/dashboard',
            component: require('./dashboard/Home').default,
        },
        {
            path: '/users',
            component: require('./users/Users').default,
            children: [
                {
                    path:'/',
                    name:'users.list',
                    component: require('./users/components/UserLists').default
                },
                {
                    path:'create',
                    name:'users.create',
                    component: require('./users/components/UserFormAdd').default
                },
                {
                    path:'edit/:id',
                    name:'users.edit',
                    component: require('./users/components/UserFormEdit').default,
                    props: (route) => ({propUserId: route.params.id}),
                },
                {
                    path:'groups',
                    name:'users.groups.list',
                    component: require('./users/components/GroupLists').default
                },
                {
                    path:'groups/create',
                    name:'users.groups.create',
                    component: require('./users/components/GroupFromAdd').default
                },
                {
                    path:'groups/edit/:id',
                    name:'users.groups.edit',
                    component: require('./users/components/GroupFromEdit').default,
                    props: (route) => ({propGroupId: route.params.id}),
                },
                {
                    path:'permissions',
                    name:'users.permissions.list',
                    component: require('./users/components/PermissionLists').default
                },
                {
                    path:'permissions/create',
                    name:'users.permissions.create',
                    component: require('./users/components/PermissionFormAdd').default
                },
                {
                    path:'permissions/edit/:id',
                    name:'users.permissions.edit',
                    component: require('./users/components/PermissionFormEdit').default,
                    props: (route) => ({propPermissionId: route.params.id}),
                },
            ]
        },
        {
            name: 'files',
            path: '/files',
            component: require('./files/Files').default,
        },
        {
            name: 'settings',
            path: '/settings',
            component: require('./settings/Settings').default,
        }
    ],
});

router.beforeEach((to, from, next) => {
    store.commit('showLoader');
    next();
});

router.afterEach((to, from) => {
    setTimeout(()=>{
        store.commit('hideLoader');
    },1000);
});

export default router;