Dynamically loading pages in your vue-router

Soon, you will build huge Vue websites with loads of components. Loading a lot of JavaScript may generate wasteful and useless upfront delay. In the Loading your components asynchronously recipe in Chapter 4, All About Components, we already saw a hint of how to retrieve our components remotely. Here we will apply a similar technique to components loaded by a route in vue-router.

Getting ready

This recipe requires knowledge of vue-router. If you want, you can go through Loading your components asynchronously in Chapter 4, All About Components, to get a better idea of what is happening.

How to do it...

Create a new project with vue-cli by making a new directory and running the following command:

vue init webpack

You can answer the question as you prefer, as long as you add the vue-router to the template when asked.

We will create two components: one will be our home page and it will be small and light, the other component will be very big and very slow...