Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Large Application Patterns with Vuex Chapter 18

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.

Getting ready

This recipe requires knowledge of vue-router.

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 to load. What we want to achieve is to
load the home page immediately, without having to wait for the huge component to be

downloaded by the browser.

Open the Hello.vue file in the components folder. Delete everything and only leave the

following:

<template>

<div>

Lightweight hello

</div>

</template>

In the same folder, create another file named Massive.vue and write the following inside

it:

<template>

<div>

Massive hello

</div>

</template>