Vue.js 3 provides a handy createApp function allowing you to fluently create and mount a single page application.

We’re currently working on a project that mainly uses native JavaScript and we’re adding Vue.js programmatically when creating and interacting with a complex modal. Using Vue.js for the modal is helpful because of the reactive DOM interaction.

And when closing the modal, we want to unmount the Vue instance from the DOM until we’re creating a new modal and mounting the Vue app again.

This tutorial shows you how to manually unmount a Vue application from the DOM.

Vue.js 3 Series Overview

Unmount a Vue App from the DOM

A Vue application provides methods to customize the instance. One of the methods is vueApp#unmount.

This unmount method removes a mounted application instance and triggers the unmount lifecycle hooks for all Vue components in the tree.

Here’s how you would manually unmount a Vue app:

import { createApp as createVueApp } from 'vue';

const app = createVueApp(App)  
  .use(…)
  .provide(…)

app.unmount()  

Please notice: the vueApp#mount function returns void and not the Vue app instance. You must separately call the app.mount() method when creating a Vue app in a fluent method call chain to keep reference to the Vue app instance:

import { createApp as createVueApp } from 'vue';

const app = createVueApp(App).mount('#app')

console.log(app)  
// undefined

Enjoy unmounting Vue apps!

Mentioned Resources

• Vue docs on app#unmount