Router-view is not loading

Question

I have attached Components to router-link but it is not loading. I am using Vue js in Laravel. I am working with Laravel and Vue

This is my blade file of Laravel.

home.blade.php

<div id="app">
    <app-main></app-main>
</div>

AppMain.vue:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default
{

}

App.js

Vue.component('app-main', require('./components/front/common/AppMain.vue').default);
Vue.component('app-login', require('./components/auth/Login.vue'));


const routes = [
{ 
    path: '*', 
    component: require('./components/front/common/AppMain.vue')
},
{ 
    path: '/login', 
    component: require('./components/auth/Login.vue')
}
]

const router = new VueRouter({
   routes
})

const app = new Vue({
   el: '#app',
   router
});

Error

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <AppMain> at resources/js/components/front/common/AppMain.vue
         <Root>

Answer 1

Have you tried removing ".default" from app-main component import? In my early days of vue/laravel work this threw me too. I found it safer to just use "import from '../module path'" at the top instead or "require(...)" states. I can't recall what specification of JavaScript this points to.

Answer 2

Please try with this code in app.js .

import Vue from 'vue';
window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

Vue.component('app-main',require('./components/front/common/AppMain.vue').default);
Vue.component('app-login', require('./components/auth/Login.vue'));

import appMain from './components/front/common/AppMain';
import appLogin from './components/auth/Login';


const routes = [
    {
      path: '/',
      component: appMain,
      children: [
          { 
              path: 'login',
              component: appLogin
          }
      ]
]

const router = new VueRouter({
   routes
})

const app = new Vue({
   el: '#app',
   router: router
});

Answer 3

Please try with this code see wheather it's work.

const app = new Vue({
    router,
    el: '#app',
    render: h => h(App) //add this new line
});