Best method for rendering & controlling vue components programmatically

[AbdallahAlhaddad]

Rendering vue components programmatically

I was wondering what is the recommended way to render, update and control a vue component programmatically (outside of .vue sfc files)?

Requirements of the recommended rendering technique:

• Should Have access to all app global properties, plugins, and injected data in the main application app instance.
• Should not create a separate vue app instance for each newly created components (as shown in the image below).

• Should have proper way of controlling the component lifecycle.

My knowledge on how to render a vue component programmatically & their drawbacks

using createApp().mount()

import { createApp } from 'vue'
import { ComponentToRender } from '#components'

//👈 Create:
const div = document.createElement('div')
const props = reactive({})
const app = createApp(ComponentToRender, props)
const instance = app.mount(div)

//👈 proper way update props & rerender:
// you can pass reactive props , or force update using `instance.$forceUpdate()`

//👈 proper unmount:
app.unmount()

Advantages

• Proper control of component lifecycle (unmount, forceRerender, prop update,...etc.)

Drawbacks

• New vue app is created for each component render.

• Global app plugins & providers are not available for the rendered component (We create a separate vue app instance that doesn't have access to global properties of the main application instance).

using render() & h()

//👈 Create:
import { h, render, reactive } from 'vue'
import { ComponentToRender } from '#components'
const div = document.createElement('div')
const props = reactive({})
const vNode = h(ComponentToRender, props)
vNode.appContext = this.appContext // 👈 Very important (to use the global properties of the current vue app, e.g. app `plugins`)
render(vNode, div)

//👈 proper way update props & rerender??

//👈 proper unmount??

Advantages

• All global app plugins & providers are available for the rendered component.
• There is only one vue app instance create (the app instance is used to render the component)

Drawbacks

• There is no Proper control of component lifecycle.
• Hacky (Low level api may not work in the future)

Why the hustle??

I am using a graph diagramming framework which has the ability to customize the way of rendering graph elements. I was trying to use vue components for each graph element to get the powerful data binding and conditionals. here is a simplified version of the current code:

import { HtmlVisual, INode, IRenderContext, NodeStyleBase, Size, type TaggedHtmlVisual } from 'yfiles'
import { type Component, h, render, reactive, getCurrentInstance } from 'vue'

type PropsProvider<P> = (context: IRenderContext, node: INode) => P

const defaultPropsProvider: PropsProvider<any> = (context, node) => ({ tag: node.tag })

type VueComponentNodeStyleVisual = TaggedHtmlVisual<HTMLDivElement, any>
/**
 * An {@link INodeStyle} implementation that renders a Vue.js component as the visualization for a node.
 */
export class VueComponentNodeStyle<P> extends NodeStyleBase<VueComponentNodeStyleVisual> {
  private state = reactive<Record<any, any>>({})
  private div: HTMLDivElement | null = null
  constructor(
    private readonly appContext = getCurrentInstance()?.appContext ?? null, //Vue app context
    private readonly vueComponent: Component,
    private readonly propsProvider: PropsProvider<P> = defaultPropsProvider
  ) {
    super()
  }

  protected createVisual(context: IRenderContext, node: INode): VueComponentNodeStyleVisual {
    this.renderVueComponent(context, node)

    const visual = HtmlVisual.from(this.div!, this.state)
    HtmlVisual.setLayout(this.div!, node.layout)
    // register a callback that unmounts the Vue app when the visual is discarded
    context.setDisposeCallback(visual, (context, removedVisual, dispose) => {
      this.div = null
      removedVisual.element.innerHTML = ''
      return null
    })
    return visual
  }

  protected updateVisual(
    context: IRenderContext,
    oldVisual: VueComponentNodeStyleVisual,
    node: INode
  ): VueComponentNodeStyleVisual {
    this.renderVueComponent(context, node)
    oldVisual.element = this.div!
    HtmlVisual.setLayout(oldVisual.element, node.layout)
    return oldVisual
  }

  protected renderVueComponent(context: IRenderContext, node: INode) {
    const props = this.propsProvider(context, node)
    this.setState(props)

    this.div = context.canvasComponent!.div.ownerDocument.createElement('div')
    let vNode = h(this.vueComponent, this.state)
    vNode.appContext = this.appContext
    render(vNode, this.div!)
  }

  setState(value: any) {
    this.state = value
  }
}

[AbdallahAlhaddad]

Duplicate (also an old version) of:
vuejs/rfcs#582