Async components for lazy loading in Vue - Mini Project: Build & Apply

Async Components for Lazy Loading in Vue

📖 Scenario: You are building a Vue app that shows different sections on demand. To make the app faster, you want to load some parts only when needed.

🎯 Goal: Create a Vue app that uses an async component to lazy load a ProfileCard component only when it is shown.

📋 What You'll Learn

Create a Vue app with a showProfile boolean state

Create an async component called ProfileCard using defineAsyncComponent

Add a button to toggle showProfile

Render ProfileCard only when showProfile is true

💡 Why This Matters

🌍 Real World

Lazy loading components helps speed up web apps by loading parts only when needed, improving user experience.

💼 Career

Understanding async components is important for building efficient Vue apps and is a common skill required in frontend developer roles.

1

Set up Vue app with showProfile state

Create a Vue component with a showProfile state variable initialized to false using ref. Use script setup syntax.

Vue

// Create a ref called showProfile and set it to false
// Your code here

Need a hint?

Use import { ref } from 'vue' and then const showProfile = ref(false).

2

Create async component ProfileCard

Import defineAsyncComponent from 'vue' and create an async component called ProfileCard that loads from './ProfileCard.vue'.

Vue

import { ref, defineAsyncComponent } from 'vue'
const showProfile = ref(false)
// Create async component ProfileCard loading './ProfileCard.vue'
// Your code here

Need a hint?

Use defineAsyncComponent(() => import('./ProfileCard.vue')) to create ProfileCard.

3

Add button to toggle showProfile

Add a button element with a click event that toggles showProfile.value between true and false. The button text should be 'Toggle Profile'.

Vue

import { ref, defineAsyncComponent } from 'vue'
const showProfile = ref(false)
const ProfileCard = defineAsyncComponent(() => import('./ProfileCard.vue'))



  
  

Need a hint?

Use @click="showProfile = !showProfile" on the button to toggle the boolean.

4

Render ProfileCard only when showProfile is true

Inside the template, add a <ProfileCard /> component that only shows when showProfile is true using v-if.

Vue

import { ref, defineAsyncComponent } from 'vue'
const showProfile = ref(false)
const ProfileCard = defineAsyncComponent(() => import('./ProfileCard.vue'))



  Toggle Profile
  
  

Need a hint?

Use <ProfileCard v-if="showProfile" /> to show the component only when true.