onBeforeMount and onBeforeUnmount in Vue - Mini Project: Build & Apply

Using onBeforeMount and onBeforeUnmount in Vue 3

📖 Scenario: You are building a simple Vue 3 component that shows a message when it is about to appear on the page and another message when it is about to be removed. This helps you understand how Vue manages component lifecycle events.

🎯 Goal: Create a Vue 3 component using the Composition API that logs messages using onBeforeMount and onBeforeUnmount lifecycle hooks.

📋 What You'll Learn

Use the onBeforeMount lifecycle hook to log 'Component is about to mount' before the component appears.

Use the onBeforeUnmount lifecycle hook to log 'Component is about to unmount' before the component disappears.

Use the <script setup> syntax with Composition API.

Render a simple message inside a <div> element.

💡 Why This Matters

🌍 Real World

Lifecycle hooks like onBeforeMount and onBeforeUnmount help manage setup and cleanup tasks in Vue components, such as starting or stopping timers, fetching data, or cleaning event listeners.

💼 Career

Understanding Vue lifecycle hooks is essential for frontend developers working with Vue.js to build efficient, maintainable, and bug-free user interfaces.

1

Create the Vue component skeleton

Write a Vue 3 Single File Component using <script setup>. Import ref from 'vue' to create a reactive message string set to 'Hello Vue!'. Render the message inside a <template> with a <div>.

Vue

  {{ message }}



// Your code here

Need a hint?

Use ref to create a reactive message variable inside <script setup>.

2

Add onBeforeMount lifecycle hook

Import onBeforeMount from 'vue' and use it to log 'Component is about to mount' before the component appears.

Vue

  {{ message }}



import { ref, onBeforeMount } from 'vue'

const message = ref('Hello Vue!')

// Use onBeforeMount here

Need a hint?

Use onBeforeMount(() => { ... }) to run code before the component mounts.

3

Add onBeforeUnmount lifecycle hook

Import onBeforeUnmount from 'vue' and use it to log 'Component is about to unmount' before the component is removed.

Vue

  {{ message }}



import { ref, onBeforeMount, onBeforeUnmount } from 'vue'

const message = ref('Hello Vue!')

onBeforeMount(() => {
  console.log('Component is about to mount')
})

// Use onBeforeUnmount here

Need a hint?

Use onBeforeUnmount(() => { ... }) to run code before the component unmounts.

4

Complete the component with proper imports and template

Ensure the component uses <template> with a <div> showing {{ message }}, and the <script setup> imports ref, onBeforeMount, and onBeforeUnmount from 'vue'. The lifecycle hooks should log the correct messages.

Vue

  {{ message }}



// Final check: imports and lifecycle hooks

Need a hint?

Make sure all imports and lifecycle hooks are present and the template shows the message.