Question

62

How to programmatically create a component instance in Vue 3?

rated 0 times [ 64] [ 2] / answers: 1 / hits: 8024 / 3 Years ago, wed, october 27, 2021, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

morrismilom

Add To Favorites

Follow

Total Points: 230

Total Questions: 96

Total Answers: 114

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

morrismilom questions

1 How can I configure Prettier & VS Code's settings.json file to format both JavaScript & HTML documents?

Mon, Dec 6, 21, 00:00, 3 Years ago

1 Is there any way to suppress hydration warning in React.FC?

Sun, Apr 25, 21, 00:00, 3 Years ago

1 node-fetch not working with AWS lambda function (cannot find node-fetch)

Thu, Dec 10, 20, 00:00, 4 Years ago

1 React render multiple buttons in for loop from given integer

Tue, Nov 3, 20, 00:00, 4 Years ago

1 Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase')

Sat, Oct 31, 20, 00:00, 4 Years ago

View All

answered 3 Years ago katia · Accepted Answer

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