vuejs lazy loading components without the router

2
votes

Lazy loading components in vue is not difficult with webpack: https://alligator.io/vuejs/lazy-loading-vue-cli-3-webpack/

I am trying to strip the initial load of an app to the absolute bare bones.. but i want to be able to trigger the import of components without the router.

For example, the initial load of this app will load:

  • a header
  • a burger menu
  • a dashboard
    • a form
      • a simple form
      • upon user action, an image uploader is called into play
    • a dashboard filter control
    • a list view

On initial load, the user must see all the above except the form and filter control box.

Based on the docs, to lazy load these components I must include them into the router.. but i don't want the url to change just to open the form for example.

How can I lazy load in components to the view without the router?

1
javascripttypescriptvue.jswebpack
github.com/maoberlehner/… – John
someone built something already :D – John

1 Answers

2
votes

If someone needs an answer here it is.
The lazy loading is already shipped with Vue without any plugins, that what I figured out recently.

Of course, this will work without Vue router.

const Component1 = () => import(
  /* webpackChunkName: "/js/component-name" */ './components/Component1'
)

const Component2 = () => import(
  /* webpackChunkName: "/js/component-name2" */ './components/Component2'
)

 const app = new Vue({
  el: '#app',
  components: {
    Component1,
    Component2
  }
})