Improve rendering vue components programmatically

[AbdallahAlhaddad]

Rendering vue components programmatically

I think it would be great to have a standardized and a documented way to:

1. Render and mount a vue component inside a specific dom element programmatically.
2. Easly update its props and propely utilize vue's diffing algorithm to update the mounted component template.
3. Destroy the component properly and run its unmounted hook.

My thoughts on the method technical requirements

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

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

Method 1: 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).

Method 2: using render() & h()

//👈 Create:
import { h, render, reactive, getCurrentInstance } from 'vue'
import { ComponentToRender } from '#components'
const div = document.createElement('div')
const props = reactive({})
const globalAppContext = getCurrentInstance()?.appContext ?? null // ❗ must be called inside a setup function
let vNode = h(ComponentToRender, props)
vNode.appContext = globalAppContext // 👈 Very important (to use the global properties of the current vue app, e.g. app `plugins`)
render(vNode, div)

//👈  Update props & rerender:
const newProps = getNewProps()
for (const k of Object.keys(newProps)) {
  props[k] = newProps[k]
}
vNode = h(ComponentToRender, props)
vNode.appContext = globalAppContext
render(vNode, div) //! update component (correctly triggering component `onUpdated` hook)

//👈  Unmount:
render(null, div)

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

• Hacky (Low level apis, may not work in the future)
• In some situations its hard to get the appContext using getCurrentInstance as we need to call it on a setup function and pass the appContext)

Why the hustle??

In some usecases we may need to run the vue components programmatically, for example, I am using a graph diagramming framework which gives me the ability to customize the way of rendering graph elements. so my plan was to use vue components for each graph element to get vue's powerful data binding and conditionals. here is working version of the implemented code:

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

import type { ComponentProps } from '@/types/vue-type-utils'

/**
 * type to infer props from the passed vue component
 */

type VueComponentNodeStyleVisual<C extends Component> = TaggedHtmlVisual<HTMLDivElement, ComponentProps<C>>
/**
 * An {@link INodeStyle} implementation that renders a Vue.js component as the visualization for a node.
 */
export class VueComponentNodeStyle<C extends Component> extends NodeStyleBase<
  VueComponentNodeStyleVisual<C>
> {
  private state = ref<ComponentProps<C>>()
  private vNode: VNode | null = null
  private div: HTMLDivElement | null = null
  constructor(
    /**
     * Vue current `appContext`
     */
    public readonly appContext = getCurrentInstance()?.appContext ?? null,
    private readonly vueComponent: C,
    private readonly propsProvider: (context: IRenderContext, node: INode) => ComponentProps<C>
  ) {
    super()
  }

  protected createVisual(context: IRenderContext, node: INode): VueComponentNodeStyleVisual<C> {
    const props = this.propsProvider(context, node)
    this.setState(props)

    if (!this.div) {
      this.div = context.canvasComponent!.div.ownerDocument.createElement('div')
      this.div.style.display = 'inline-flex'
      this.div.style.flexDirection = 'column'
      this.div.style.alignItems = 'center'
      this.div.style.justifyContent = 'center'
      // this.div.style.backgroundColor = 'blue'
    }
    this.vNode = h(this.vueComponent, this.state.value)
    this.vNode.appContext = this.appContext
    render(this.vNode, this.div)

    HtmlVisual.setLayout(this.div, node.layout)

    const visual = HtmlVisual.from(this.div, this.state.value!)

    // register a callback that unmounts the Vue app when the visual is discarded
    context.setDisposeCallback(visual, (context, removedVisual, dispose) => {
      if (dispose) {
        // visual is not going to be used again
        render(null, this.div) //! Unmount component (correctly triggering component `onUnmounted` hook)
        this.vNode = null
        this.state.value = undefined
        return null
      } else {
        return removedVisual
      }
    })
    return visual
  }

  protected updateVisual(
    context: IRenderContext,
    oldVisual: VueComponentNodeStyleVisual<C>,
    node: INode
  ): VueComponentNodeStyleVisual<C> {
    if (!oldVisual.element || !this.vNode || !this.div) {
      return this.createVisual(context, node)
    }

    this.setState(this.propsProvider(context, node))

    this.vNode = h(this.vueComponent, this.state.value)
    this.vNode.appContext = this.appContext
    render(this.vNode, this.div) //! update component (correctly triggering component `onUpdated` hook)

    HtmlVisual.setLayout(oldVisual.element, node.layout)
    return oldVisual
  }

  public getHtmlContentSize(cProps: ComponentProps<C>): Size {
    const measureContainer = document.createElement('div')

    measureContainer.style.position = 'absolute'
    measureContainer.style.zIndex = '-1'
    measureContainer.style.visibility = 'hidden'
    measureContainer.style.pointerEvents = 'none'

    const vNode = h(this.vueComponent, cProps)
    vNode.appContext = this.appContext
    render(vNode, measureContainer)

    document.body.appendChild(measureContainer)
    const clientRect = measureContainer.getBoundingClientRect()
    document.body.removeChild(measureContainer)

    return new Size(clientRect.width, clientRect.height)
  }

  private setState(value: ComponentProps<C>) {
    this.state.value = value
  }
}

[qq466610987]

agree!

[chavlji]

Totally agree!

[jods4]

You might be interested in this: https://vue-mountable.netlify.app/
By default components are mounted at the root of your application, but there's also a target option to mount them elsewhere.

As for your use case (displaying a graph of nodes of various types): wouldn't it work to simply bind a dynamic component in a v-for?
If your list of nodes is: nodes: { component, data }, you should be able to simply render them with

<div>
  <component 
    v-for="c of components" 
    :key="c.data.id" 
    :is="c.component" 
    v-bind="c.data" 
  />
</div>

In case you're not familiar with dynamic components: https://vuejs.org/guide/essentials/component-basics#dynamic-components

[chuyuandu]

I want to render a vue component in my js plugin

parent vue component provide('tt', 123)

what should i do to get it by inject('tt') in the rendered component ?

set vnode appContext can not solve my problem...

[shenjunjian]

I think the official Teleport component is already available, and it's exactly what you want.