Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Load Vue Async Components

    John LindquistJohn Lindquist

    Vue provides a straight-forward syntax for loading components at runtime to help shave off initial bundle size. You simply define a function that returns an object with a component property pointing to a promise that loads a component, then Vue takes care of the rest for you.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 I can take out this three component, create a file called three.js, export this three component, it is like that. Back in my app, I can dynamically load the three component are called as async three.

    00:21 This will be a function which returns an object where the component is an import statement pointing to the component. I'll say components/three. On my list of components, I can do one, two, and async three. I'll open up the network tab, make it quite a bit bigger, and you'll see I'll switch to two, nothing loads.

    00:48 I'll switch to three and you'll see I get three.chunk, and their responses is three component with that code in component code in there, which was loaded dynamically.

    Discuss

    Discuss