Mount

mountComponent enables you to dynamically insert and control Vue components within your application.

It's ideal for creating interactive elements like popups, tooltips, modals, and more.
This function offers fine-grained configuration options and seamlessly integrates with Vue.js constructs, making it a versatile tool for enhancing your Vue applications.

Use Cases:

• Create interactive popups and modals that appear on user interactions.
• Implement tooltips and context menus that dynamically display content.
• Build extensible and reusable UI elements that can be easily integrated into different parts of your Vue.js application.

Extending the functionality of their applications, like Vue.extend, is its main purpose by offering a versatile and intuitive way to manage dynamic components and enhance user interactions.

Basic

const { id, vNode, el, visible, destroy } = mountComponent(Modal);

Props

setup

mountComponent({
    component: Modal,
    props: {
        message: 'Test'
    }
});

modal.vue

<template>
  <div>
    {{ title }}
  </div>
</template>

<script setup>
  const props = defineProps({
    title: string
  });
</script>

Emits

setup

mountComponent({
    component: Modal,
    props: {
        testEmit: true // show the confetti emit button - not needed for emits just for this Example
    },
    emits: {
        onExample() {
            alert('This works nicely!');
        }
    }
})

modal.vue

<template>
  <button @click.prevent="$emit('example')">
    Party time!
  </button>
</template>

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

Slots

Slots allow you to chain multiple Components together, passing over props, emits or simply add more slots!

setup

mountComponent({
    component: Modal,
    slots: {
        default: createSlot(DefaultSlotComponent)
    }
});

modal.vue

<template>
  <slot />
</template>

WARNING

Predefined values like this <slot name="header" title="ok" /> will overwrite props or emits defined in the createSlot object.

setup

mountComponent({
    component: Modal,
    slots: {
        header: createSlot({
            component: HeaderSlotComponent,
            props: {
                title: 'This is a header Slot!'
            }
        })
    }
});

modal.vue

<template>
  <slot />
  <slot name="header" v-bind="props" />
</template>

<script setup>
const props = defineProps({
  title: string
});
</script>

Teleport

With Teleport you can easily move components around your DOM!
More info can be found here Vue Docs Teleport

WARNING

Ensure the existence of the target element in the DOM or it's mounting state before teleporting.

mountComponent({
    component: Modal,
    props: {
        message: 'I am teleported to `.notifications`!'
    },
    target: '.notifications'
});

via Store (Pinia)

Vue Mountable offers the flexibility to mount components outside of the standard Lifecycle setup, allowing you to mount them from anywhere you like.

setup

export const useExampleStore = defineStore('example', () => {
	function addComponentViaStore() {
		return mountComponent({
			component: Modal,
			props: { message: 'I am called from the Store!' },
		});
	}

	return {
		addComponentViaStore,
	};
});

Typescript

import type { WakuData } from '@subwaytime/waku';
import modal from './modal.vue';

const currentComponent = ref<WakuData | null>(null);
currentComponent.value = mountComponent(modal);