Unmount

Vue Mountable allows you to gracefully remove a dynamically mounted Vue component from your application's DOM.

It simplifies the process of cleaning up and removing components that are no longer needed, helping you manage your application's resources efficiently.

When unmounting any components, they will also trigger their Lifecycle hooks like onUnmounted etc and clean up the DOM.

Basic

import modal from './components/modal.vue';

const { destroy } = mountComponent(modal);

destroy();

Advanced

import { unmountComponent } from 'vue-mountable';
import modal from './components/modal.vue';

const currentComponent = ref(null);

function addModal() {
  currentComponent.value = mountComponent(modal);
}

function removeModal() {
  // OPTION 1
  currentComponent.value.destroy();

  // OPTION 2
  unmountComponent(currentComponent.value.id);
}

via unmountComponent

Unmounting a component is achieved by passing over its mountedId, this will then clear the DOM and triggers the component's lifecycle hooks.

import { unmountComponent } from 'vue-mountable';
import modal from './components/modal.vue';

const { id } = mountComponent(modal);

unmountComponent(id);

via Emit

setup

import modal from './components/modal.vue';

mountComponent(modal);

modal.vue

<template>
  <button @click.prevent="$emit('destroy')">
    Close Modal
  </button>
</template>

<script setup>
const emit = defineEmits(['destroy']);
</script>

Cleanup everything

unmountAllComponents removes all dynamically mounted Vue components from the DOM, providing a quick way to clean up and clear the application's interface.

This also kill any cached Components inside the Vue Mountable service.

import { unmountAllComponents } from 'vue-mountable';
unmountAllComponents();