Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Load Vue Async Components


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: 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.

    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.

    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.