Async / Lazy Load Vue components with browserify

Question

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:

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

Pretty old question but if anyone needs more information to lazy loading components. Here is a link to the docs. — AWolf

gurghet gurghet · Accepted Answer · 2017-02-13T22:15:57

From the documentation https://vuejs.org/v2/guide/components.html#Async-Components

If you’re a Browserify user that would like to use async components, its creator has unfortunately made it clear that async loading “is not something that Browserify will ever support.” Officially, at least. The Browserify community has found some workarounds, which may be helpful for existing and complex applications. For all other scenarios, we recommend simply using Webpack for built-in, first-class async support.

Async / Lazy Load Vue components with browserify

1 Answers