I am trying to load a number of Vue.js components into my app.js file (using browserify/vueify via elixir) in a laravel project.

Instead of loading every component at once, I'd like to lazy load the individual vue components when they are needed using vue router.

Where do I set up the partition bundle json file and how should it be structured?

At the moment, Ive tied out the following an my main app.js file:

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

// These are the components that I wish to lazy load:
// import Users from './components/Users.vue';
// import Sales from './components/Sales.vue';
// import Projects from './components/Projects.vue';
// import Dashboard from './components/Dashboard.vue';
// import Receipts from './components/Receipts.vue';

Vue.use(Resource);
Vue.use(VueRouter);

var router = new VueRouter();

router.map({
  '/async': {
    component: function (resolve) {
      loadjs(['./components/Users.vue'], resolve)
    }
  }
})

Here's where I am stuck:

  1. How do we lazy load all .vue components listed above in the router.map function?
  2. How to set up the partition table json file for the above, and where should it be saved?
share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.