How to programmatically create a component instance in Vue 3?

Question

I have a Vue 2 pattern I was using for a common scenario: programmatically creating an instance to open a Modal/Dialog/Lightbox on dynamic content outside of a template.

In Vue 2, I found this pattern:

// DialogService.js

export default {
  alert(text) {
    const DialogClass = Vue.extend(DialogComponentDef);
    let dialog = new DialogClass({ propsData: { text } });

    dialog.$on('close', () => {
      dialog.$destroy();
      dialog.$el.remove();
      dialog = null;
    });

    // mount the dynamic dialog component in the page
    const mountEl = document.createElement('div');
    document.body.appendChild(mountEl);
    dialog.$mount(mountEl);
  },
};

How can I acheive this in Vue 3, knowing Vue.extends, $on & $destroy do not exist anymore? You can see a full example of the DialogService.js by clicking here.

Not a duplicate but related, stackoverflow.com/questions/63471824/vue-js-3-event-bus — Estus Flask
– Estus Flask, Commented Oct 27, 2021 at 6:21
Actually not related at all. The event bus thing isn't the issue here. — darkylmnx
– darkylmnx, Commented Oct 28, 2021 at 11:32
It is. You create event bus that can be used programmatically (on and emit methods). Vue 3 doesn't provide such bus, so it needs to be provided externally. The rest could be the same, more or less. 'new Vue' is replaced with 'createApp'. Think of it not as of extended comp, but as of sub-app, because it really is one — Estus Flask
– Estus Flask, Commented Oct 28, 2021 at 14:55
Well, createApp doesn't keep the context of the previous app, while Vue.extend did, so createApp isn't the solution anyway here. I changed the title so that it's more explicit. — darkylmnx
– darkylmnx, Commented Oct 29, 2021 at 17:52

binaryfunt · Accepted Answer · 2023-01-16 13:39:14Z

12

Here's how to do with createApp in Vue 3, but the context (stores, plugins, directives...) will not be kept.

// DialogService.js
import { createApp } from 'vue';

export default {
  alert(text) {
    const mountEl = document.createElement('div');
    document.body.appendChild(mountEl);

    const dialog = createApp({ extends: DialogComponentDef }, {
      // props
      text,
      // events are passed as props here with on[EventName]
      onClose() {
        mountEl.parentNode.removeChild(mountEl);
        dialog.unmount();
        dialog = null;
      },
    });

    dialog.mount(mountEl);
  },
};

To keep the context, there's something more complicated that can be seen here with h and render Vue methods : https://github.com/vuejs/vue-next/issues/2097#issuecomment-709860132

edited Jan 16, 2023 at 13:39

binaryfunt

7,2855 gold badges44 silver badges69 bronze badges

answered Oct 29, 2021 at 18:03

darkylmnx

2,1215 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marshal · Accepted Answer · 2022-01-04 01:40:57Z

3

I would recommend using the mount-vue-component. It's lightweight and easy to use. Code example:

import MyComponent1 from './MyComponent1.vue'
import MyComponent2 from './MyComponent2.vue'
import { mount } from 'mount-vue-component'

let dynamicComponent = mount(someCondition ? MyComponent1 : MyComponent2, { props: { <someProperties...> }, app: MyVueApp })

answered Jan 4, 2022 at 1:40

Marshal

4,9401 gold badge25 silver badges16 bronze badges

Comments

Andres Separ · Accepted Answer · 2022-02-15 16:03:15Z

2

Here is the simple way to call and run a component programmatically

/* DialogService.js */
import DialogVue from './Dialog.vue';
import { createApp } from 'vue';

const Dialog = (options = {}) => {
  const onClose = options.onClose;
  const tempDiv = document.createElement('div');
  const instance = createApp(DialogVue).mount(tempDiv);

  instance.title = options.title;
  instance.text = options.text;
  instance.onClose = options.onClose;
  instance.show = true;

  document.body.appendChild(instance.$el);
}

export default Dialog;

<!-- Dialog.vue -->
<template>
  <transition name="fade-bottom">
    <h3 v-if="title">{{ title }}</h3>
    {{ text }}
    <button @click="show = false; onClose()">Cancel</button>
  </transition>
</template>

<script setup>
import { ref, defineExpose } from 'vue'

const show = ref(false)
const title = ref('')
const text = ref('')
const onClose = () => {}

defineExpose({
  title,
  text,
  show,
  onClose
})

</script>

edited Feb 15, 2022 at 16:03

answered Feb 15, 2022 at 15:53

Andres Separ

3,3941 gold badge21 silver badges18 bronze badges

1 Comment

ShadowGames Over a year ago

I wonder if mount(tempDiv) is necessary. Is there a way to not wrap the component into a surrounding <div></div>?

Estus Flask · Accepted Answer · 2021-10-27 07:24:32Z

-1

Vue 3 doesn't provide a generic event bus. It can be replaced with lightweight third-party alternatives like mitt or eventemitter3.

A component can be mounted outside application element hierarchy with a teleport. This has been previously available in Vue 2 with third-party portal-vue library. Modals and other screen UI elements are common use cases for it

<teleport to="body">
  <DialogComponent ref="dialog" @close="console.log('just a notification')">
   Some markup that cannot be easily passed as dialog.value.show('text')
  </DialogComponent>
</teleport>

Where DialogComponent controls its own visibility and doesn't need to be explicitly unmounted like in original snippet. A cleanup is performed automatically on parent unmount:

<teleport to="body">
  <div v-if="dialogState">
    <slot>{{dialogText}}</slot>
  </div>
</teleport>

and

let dialogState = ref(false);
let dialogText = ref('');
let show = (text) => {
  dialogText.value = text;
  dialogState.value = true;
} ;
...
return { show };

For more complex scenarios that require to manage multiple instances, or access show outside components in business logic, a teleport needs to be mounted at the top of component hierarchy. In this case an instance of event bus that can be passed through the application can be used for interaction.

edited Oct 27, 2021 at 7:24

answered Oct 27, 2021 at 6:57

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

3 Comments

darkylmnx Over a year ago

Well my question has nothing to do with event buses. Also, the modal here is just an example of the pattern, the whole pattern here is to be able to instantiate a component when you're not in a template. Teleport is meant to solve things done in a template A that has to appear in a template B. Which isn't the same scenario here.

Estus Flask Over a year ago

Well, it could be worded better then. This is a common way to do what you asked about in V3. V2 didn't have teleports to mount a comp outside the app, so you had to jump through hoops by mounting it manually.

darkylmnx Over a year ago

I changed the title so that it's more explicit.

Collectives™ on Stack Overflow

How to programmatically create a component instance in Vue 3?

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related