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
– AWolf, Commented Feb 12, 2017 at 23:19

tony19 · Accepted Answer · 2022-07-15 04:54:20Z

1

From the documentation https://v2.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.

edited Jul 15, 2022 at 4:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 13, 2017 at 22:15

gurghet

7,6865 gold badges40 silver badges66 bronze badges

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

Collectives™ on Stack Overflow

Async / Lazy Load Vue components with browserify

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related