Vue.js Lazy Loading Components in Vue Router
In this article, I’m going to share how to lazy load components in vue router using dynamic imports. Let’s start:
Table of Contents
Step 1 : Create Project & Setup
Create a project and go to the project directory:
# create
vue create vue-lazy-load-components
# go to directory
cd vue-lazy-load-components
We’ll test the lazy load in vue router. We need to install vue router:
npm i vue-router
Step 2 : Create Components
Let’s create 3 components and add simple text.
<template>
<div>
<h1>This is home page</h1>
</div>
</template>
<template>
<div>
<h1>This is about page</h1>
</div>
</template>
<template>
<div>
<h1>This is contact page</h1>
</div>
</template>
Step 3 : Create Lazy Routes
Open main.js
and import vue-router & components.
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import Home from './components/Home.vue';
// dynamic imports
const About = () => import('./components/About.vue');
const Contact = () => import('./components/Contact.vue');
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
routes: [
{ path: '/', component: Home },
{path: '/about', component: About},
{path: '/contact', component: Contact}
]
})
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
To make lazy load, we’ve imported the components using dynamic import:
const About = () => import('./components/About.vue');
const Contact = () => import('./components/Contact.vue');
Step 4 : Test Lazy Load
Open App.vue
files and display the router links like:
<template>
<div id="app">
<ul class="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
ul a {
padding: 5px;
}
</style>
Now let’s run the app using npm run serve
command. Take a look at the network tab of the console.

The tutorial is over. You can download this project from GitHub. Thank you. ?
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)