Create a Lazy Loaded Wizard in Vue.js

A wizard is a component consisting in several steps. Each step is a different view. Let’s see how to create a wizard that lazy loads its parts in Vue.js.

🧙 The Wizard Steps

Each step in a wizard is one of the screens that the wizard is showing. Let’s create one component per each step and name it using the same naming pattern, such as Wizard-step1.vue, Wizard-step2.vue, Wizard-step3.vue. Just put some trivial content in there, for instance:

<template>
  <div>
    Step 1
  </div>
</template>

The Wizard

This is the component where the magic happens. The wizard has a step counter which we’ll use to lazy load, and a button which will increase that counter. Let’s get that done:

<template>
  <div>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data: () => ({ step: 1 }),
  methods: {
    next() {
      this.step++;
    }
  }
};
</script>

The idea is that the wizard loads the corresponding component depending on the current step. For lazy loading, we can use a dynamic import, but that’s asynchronous and returns a promise, while a component’s rendering is synchronous.

Vue gives us a couple of features we might be able to use for our purpose:

• Async components: Passing a function (which returns a promise) instead of an object allows to asynchronously lazy load components, at least when using local and global registration. The problem is that those components are known beforehand, which is not the case for our example.

• Dynamic components: Using the <component> reserved element, we can hot-swap components dynamically. However, we have the same problem, we have to know beforehand those components.

  Here’s the treasure: even though it’s not documented on the Vue.js docs, we can combine the power of both features using a computed property combined with the dynamic import, since the element also allows to get a function returning a promise which under the hood performs a kind of local registration.

  The dynamic import is a JavaScript feature that allows to load a module at runtime, similar to how require works with Node.js. Some module bundlers, such as Webpack or Rollup, use the dynamic import as a code splitting point and create a separate bundle, loaded on demand when that code is reached.

  Let’s add that part to the component:

<template>
  <div>
    <button @click="next">Next</button>
    <component :is="stepComponent"/>
  </div>
</template>

<script>
export default {
  data: () => ({ step: 1 }),
  computed: {
    stepComponent() {
      return () => import(`./Wizard-step${this.step}.vue`);
    }
  },
  methods: {
    next() {
      this.step++;
    }
  }
};
</script>

I’m creating the stepComponent computed property, which returns a function that loads the right component given the current step. Then above, I’m using the <component> element and binding it to stepComponent.

If you try it out, it should work. However, if you click on the next button, it won’t update. This is due to the fact that it’s not evaluating any reactive property within the computed property, since step is within the returned function. Computed properties in Vue are cached, and in this case is returning the latest value.

You could try to use a method instead, which is not cached, but you’ll end up in an infinite rendering loop (try yourself).

The workaround is to make Vue evaluate the step state property. For that, we can simply call it:

stepComponent() {
  this.step; // Just call it
  return () => import(`./Wizard-step${this.step}.vue`);
}

Try it again, open the network tab of the browser devtools and enjoy watching how your chunks are loaded as you press the next button! ✨