vuejs lazy loading components without the router

Question

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?

Answer 1

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
  }
})