Programatically create and mount components with vue 3

Question

I need to programatically create and mount components on the fly from parent component.

It works fine with Vue 2.

import Vue from 'vue' 

// ParentComponent.vue
export default {
  methods: {
    createChild() {
      const Child = Vue.extend(ChildComponent)
      const child = new Child({
        propsData,
        store: this.$store,
        i18n: this.$i18n
      }).$mount()
    }
  }
}

But I cannot figure out how-to do with Vue 3.

What about using in-template component rendering instead, like <component v-bind:is="childComponent"> instead? — Terry
– Terry, Commented Jul 1, 2021 at 14:09
I don't think this is a rendering issue, but more about having the flexibility to programatically instantiate components on the fly. — srjjio
– srjjio, Commented Jul 1, 2021 at 14:18

srjjio · Accepted Answer · 2021-07-01 14:16:23Z

2

I have finally ended with this, after finding some info here:

// ParentComponent.vue
import { h, render } from 'vue' 

export default {
  methods: {
    createChild() {
      const child = h(ChildComponent, propsData)
      child.appContext = this.$.appContext  // use store, i18n
      const el = document.createElement('div')
      render(node, el)
    }
  }
}

answered Jul 1, 2021 at 14:16

srjjio

1,0491 gold badge9 silver badges19 bronze badges

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

1 Comment

Stealth Rabbi Over a year ago

what is your node variable? where is it set?

Collectives™ on Stack Overflow

Programatically create and mount components with vue 3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related