Resolve dependencies for your routes before rendering the component

Vue-resolve

A VueJS (2.x) / Vue-router plugin that resolves dependencies for routes before entering.

What is this?

A plugin that reads a meta.resolve property on your component's route and resolve it (as a promise) before serving the route.

Install

Install from npm:

npm install vue-resolve --save

or from yarn:

yarn add vue-resolve

Example

...
import VueResolve from 'vue-resolve';

const router = new VueRouter({
    routes: [{
        path: '/',
        component: mycomp,
        meta: {
            resolve: {
                mydata() {
                    return axios.get('/api/data');
                }
            }
        }
    }]
});

Vue.use(VueResolve, {
    router,
    dataProperty: 'data',
});

new Vue({
    ...
    router,
});

Important:

For reactivity please make sure to define the data properties your route is going to populate in your component, so Vue can keep track of changes after the routes resolves. (e.g. on the mycomp component, must exist a mydata data)

GitHub