joseph127
407
7
Vue

Vue Router within a component

Posted 2 years ago by joseph127

So this is something I hadn't thought about doing before, but actually needed to for a project I am working on. So instead of having a single page app with vue router. 90% of the app will be standard laravel code, only certain pages will contain a vue router. Sounds simple enough I thought?

This is the approach I decided to take.

app.js

require('./bootstrap');

//Global components
Vue.component('header-component', require('./components/Header.vue'));
Vue.component('project-component', require('./components/Project.vue'));
Vue.component('sidebar-component', require('./components/Sidebar.vue'));

Vue.component('landing-page', require('./pages/Landing.vue'));
Vue.component('register-page', require('./pages/Register.vue'));
Vue.component('project-page', require('./pages/Project.vue'));


/**
 * Define the main application, this is where all the vue
 * components, pages and modals etc will be initiated into
 */
const app = new Vue({
    el: 'body',
});

/**
 * Define the router. The router will act as a seemless
 * transition between the projects/modals. The reason
 * for this is to allow transitions between pages.
 */
const router = new VueRouter({
    hashbang: false,
    history: true,
    suppressTransitionError: false
});

//Enable HTML5 mode
router.mode = 'html5';

//Map out the routes
router.map({
    '/:team': {
        name: 'team',
        component: Vue.component('project-page'),

        subRoutes: {
            '/:project': {
                name: 'project',
                component: Vue.component('project-page'),
                subRoutes: {
                    '/:screen': {
                        name: 'screen',
                        component: Vue.component('project-page'),
                    }
                },
            },
        },
    },
});

//Start the router
router.start(Vue.component('project-component'), '#project');

the view

<component is="project-component" inline-template v-cloak>
    <section class="container-project" id="project">
        <router-view></router-view>
    </section>
</component>

The strange thing is, everything works as expected. All the $route.params variables come through from the routes setup, and the template of "project-component" is displaying for the correct routes. But I am having a console error of:

<router-view> can only be used inside a router-enabled app.

upon googling this, I only found situations where vue router was initiated on the root app. in which case a simple Vue.extend does the trick. So whats the best way for going about this? And maybe shed some light on why this error is occurring?

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.