Async / Lazy Load Vue components with browser

Question

I am trying to load several Vue.js components into an app.js file (using the / vueify browser via elixir) in a laravel project.

Instead of loading each component at once, I would like to be lazy to load individual vue components when they are needed, using vue router .

Where can I configure the partition bundle json file and how should it be structured?

Ive currently linked the following 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 where I am stuck:

• How are we lazy to load all the .vue components listed above into the router.map function?
• How to configure the partition table json file for the above and where should I save it?

Answer 1

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

If you use Browserify that would like to use async components, its creator unfortunately made it clear that downloading async "is not what Browserify will ever support." Officially, at least. The Browserify community has discovered some workarounds that may be useful for existing and complex applications. For all other scenarios, we recommend that you simply use Webpack for native, first-class async support.