Failed to resolve async component render with view-router

Question

I tried to implement VueJs with VueRouter. Home component is showing the log message but not the template part. And i got the following error:

Home.vue

<template>
    <div class="wrap" id="app">
        <h1 class="inline">Hello There</h1>
    </div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            maps: []
        }
    },
    mounted() {
        console.log( 'Mounted Homepage' );
    }
}
</script>

<style lang="scss">
#app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
</style>

routes.js

import Vue from 'vue';
import Home from './components/Home.vue';
import NotFound from './components/NotFound.vue';

const routes = [
    { name: 'home', path: '/', components: Home },
    { path: '*', component: NotFound, meta: { title: 'Not Found' } }
];

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


var router = new VueRouter({
    routes
})

export default router;

Main.js

import Vue from 'vue'
import NotFound from './components/NotFound.vue'
import router from './routes'

new Vue({
    router,
    components: {
        NotFound
    }
}).$mount('#rgm_app');

Can you please let me know what i have missed?

Sam Kitano · Accepted Answer · 2017-06-17 15:01:12Z

15

you have a typo in this array declaration:

const routes = [
    { name: 'home', path: '/', components: Home },
    { path: '*', component: NotFound, meta: { title: 'Not Found' } }
];

just remove the extra s from components on the first object, and you should be ok.

answered Jun 17, 2017 at 15:01

Sam Kitano

1661 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CDT Over a year ago

Seems a quite common miss. Typed so many components in .vue files and I cannot help to type another components in router file!

IncrediblePony Over a year ago

weirdly... this was my issue as well even though the use case and structure was completely different...

Collectives™ on Stack Overflow

Failed to resolve async component render with view-router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related