This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Lazy Load a Vuex Module at Runtime using TypeScript

    Alex Jover MoralesAlex Jover Morales

    Sometimes we need to create modules at runtime, for example depending on a condition. We could even want to lazy load that module by using Webpack’s code splitting feature.

    This lesson shows how to lazy load a Vuex module under a determined condition using TypeScript.

    vueVue.js
    webpackwebpack
    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

    We're going to load the login module at runtime. For that first, let's remove it from this import and from the Vuex store. Then go to the main TS file, and we are going to load it based in a dynamic constant.

    The store has a registerModule method which takes the module name as the first parameter and the module as the second, which we have to import here. Login from store login. With this, the module will be loaded dynamically.

    Now, it's log in, but if we invert condition, then it crashes. That's because the app view component expects that the login module exists, and it has no other check for Vuex assistance. Let's go there to the app component.

    To check for the login state assistance, we could go to the template and use a Vuex dev.nav. We check that login exists. Then we move the button on the testing side. As you can see, now the login button is not shown, and it doesn't crash anymore.

    At this point, we can use the code splitting feature of Webpack to lazy load that module. For that, instead of importing login up there, we can use the ECMAScript dynamic import function to request that module at runtime.

    It returns a promise with the module. We are going to use the object spread operator to take only the login which is the module and load it. In order to use the object spread operator in our function, we have to wrap it with parentheses.

    In order to make TypeScript understand the import function, we have to go to the TS config and change the module to ES next, so it doesn't complain anymore. We also have to rerun the project, because we changed the TS config, and it has to reload it again.

    Now, if we go to the network tab in the dev tools, we see only an object JS bundle is reloaded. If we change the condition to load that module, we see now the login button is there, the module is loaded, and another chunk has been created, the C.JS.

    Discuss

    Discuss