Dynamically Mount Components With Vue Mountable

Install & Download:

# NPM
$ npm install vue-mountable
# PNPM
$ pnpm add vue-mountable

Description:

Mountable is a lightweight and flexible Vue 3 component that simplifies the process of dynamically mounting components in your Vue applications.

It can be useful in creating interactive elements like popups, tooltips, modals, and more.

How to use it:

1. Improt the VueMountable after installation.

import { createApp } from 'vue';
import { VueMountable } from 'vue-mountable';
const app = createApp();
app.use(VueMountable());

2. Create a mountable component as follows:

<template>
  <div>
    <h1> MODAL </h1>
  </div>
</template>

3. Mount the modal component with the mountComponent.

import modal from './modal.vue';
const { id, vNode, el, destroy } = mountComponent({
  component: modal,
  props: {
    title: 'Test'
  },
  emits: {
    onExample() {
      alert('This works nicely!');
    }
  },
});

4. Remove a dynamically mounted Vue component from the DOM.

const { destroy } = mountComponent(modal);
destroy();

Preview:

Dynamically Mount Components With Vue Mountable

Add Comment