CODEWITHSUNDEEP
javascriptvue.jsvuejs3
srjjio
srjjio

Reputation: 1049

Programatically create and mount components with vue 3

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.

Upvotes: 0

Views: 483

Answers (1)

srjjio
srjjio

Reputation: 1049

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)
    }
  }
}

Upvotes: 2

Related Questions