2

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?

Improve this question
2
  • github.com/maoberlehner/… Commented Sep 3, 2019 at 18:40
  • someone built something already :D Commented Sep 3, 2019 at 18:40

1 Answer 1

Reset to default
2

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
  }
})
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.