Router-view not loading contents, failed to mount template

Question

I am new to Laravel and Vue Js. I am facing an issue and I am not being able to figure out what the exact problem is.

app.blade.php

<body>
    <v-app id="app">

            <example-component/>

    </v-app>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

import vuetify from './vuetify';
import router from './router';  


import Example from './components/ExampleComponent';


    new Vue({
    el: '#app',
    router,
    vuetify


});

ExampleComponent.vue


<template>
<div>
  <v-content>
  <v-container>   
        <v-btn color="primary" link to="/foo">Foo</v-btn>     
        <v-btn color="primary" link to="/bar">Bar</v-btn>
  </v-container>

    <router-view></router-view>
  </v-content>
  </div>

</template>

<script>
export default {

}
</script>

<style>

</style>

vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify)

export default new Vuetify({

})

router.js

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

const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}

Vue.use(VueRouter)



const routes = [
    {
        path: '/foo',
        component: foo,
    },
    {
        path: '/bar',
        component: bar,
    }

]

export default new VueRouter({
    routes
})

It is giving me this error in the console:

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

found in

---> <Anonymous>
       <VContent>
         <ExampleComponent> at resources/js/components/ExampleComponent.vue
           <VApp>
             <Root>

My buttons are not loading the router-view. Also, I would like to know what is the difference between registering components using import and Vue.component? Please help me.

Answer 1

It looks like there is a typo. Change:

const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}

to

const foo = {template: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {template: '<v-alert type="success">I am Bar</v-alert>'}

Router-view not loading contents, failed to mount template

Question

1 answers

solution1
1 ACCPTED 2020-04-16 04:23:06

Router-view not loading contents, failed to mount template

Question

1 answers

solution1 1 ACCPTED 2020-04-16 04:23:06

solution1
1 ACCPTED 2020-04-16 04:23:06