onBeforeMount and onBeforeUnmount in Vue

Introduction

These hooks let you run code right before a component appears on the screen or just before it disappears. This helps you prepare or clean up things smoothly.

You want to fetch data or set up something just before the component shows.

You need to start a timer or event listener before the component appears.

You want to stop timers or remove event listeners before the component goes away.

You want to save some state or clean resources before the component is removed.

You want to log or track when a component is about to mount or unmount.

Syntax

Vue

import { onBeforeMount, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      // code to run before mount
    });

    onBeforeUnmount(() => {
      // code to run before unmount
    });
  }
}

Use these inside the setup() function of a Vue 3 component.

The functions you pass run once at the right time automatically.

Examples

This logs a message just before the component shows on screen.

Vue

import { onBeforeMount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Component will appear soon');
    });
  }
}

This logs a message just before the component is removed from the screen.

Vue

import { onBeforeUnmount } from 'vue';

export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('Component will disappear soon');
    });
  }
}

This shows how to use both hooks together for setup and cleanup.

Vue

import { onBeforeMount, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Setup before mount');
    });
    onBeforeUnmount(() => {
      console.log('Cleanup before unmount');
    });
  }
}

Sample Program

This example has a parent with a button to show or hide a child component. The child logs messages just before it appears and just before it disappears.

Vue

<template>
  <div>
    <button @click="show = !show">
      Toggle Child Component
    </button>
    <ChildComponent v-if="show" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const show = ref(false);
</script>

<!-- ChildComponent.vue -->
<template>
  <p>Child component is visible.</p>
</template>

<script setup>
import { onBeforeMount, onBeforeUnmount } from 'vue';

onBeforeMount(() => {
  console.log('ChildComponent will mount soon');
});

onBeforeUnmount(() => {
  console.log('ChildComponent will unmount soon');
});
</script>

Important Notes

These hooks run only once per component lifecycle.

They are useful for preparing or cleaning up resources.

They run before the component is actually added or removed from the DOM.

Summary

onBeforeMount runs right before the component appears.

onBeforeUnmount runs right before the component disappears.

Use them inside setup() to prepare or clean up smoothly.