SoFunction
Updated on 2025-04-03

About vue3 writing plug-in for mounting DOM

Compared with vue2, vue3 has an additional concept of app, and the creation of vue3 projects has also become

// 
import { createApp } from 'vue'
import App from './'
import ElementPlus from 'element-plus'

const app = createApp(App)
(ElementPlus)   // Use the Ele.me framework('#app')

So there is nothing more.

vue2 creates a plugin:

export default function install (Vue) {
  let app = ({
    render (h) {
      return h('div', {
        style: {
          display:  ? 'flex' : 'none'
        }
      })
    }
  })

  let appDom = new app({
    el: ('div'),
    data: function () {
      return {
        isShow: false
      }
    }
  })

  function show () {
     = true
  }

  function hide () {
     = false
  }
  .$show = show
  .$hide = hide
  (appDom.$el)
}

vue3 creates a plugin:

import { createApp, h } from 'vue'

export default function install (App) {
  let app = createApp({
    data() {
      return {
        isShow: false,
      }
    },
    render() {
      return h('div', {
        style: {
          display:  ? 'flex' : 'none'
        }
      })
    }
  })
  
  const vNodeDom = ('div')
  (vNodeDom)
  const vm = (vNodeDom)

  .$show = function () {
     = true
  }

  .$hide = function () {
     = false
  }
}

By comparison, we can find that the DOM mount method of vue3 is to create a new app and then call the mount() method to insert it into the page.

The mounting method of global methods also ranges from vue2 to vue3.

In addition, if the vue3 plug-in creates a new DOM structure and inserts it into the page, it is isolated from the app created in , which means that the components and public methods of use in , cannot be used in this plug-in.

// 
<template>
<el-button>Button</el-button>
</template>


// 
import { createApp, h } from 'vue'
import myCom from './'
export default function install (App) {
  let app = createApp({
    data() {
      return {
        isShow: false
      }
    },
    render() {
      return h(myCom)
    }
  })

  const vNodeDom = ('div')
  (vNodeDom)
  (vNodeDom)
}

In the above example, el-button cannot be displayed normally, and the console will report an error:

[Vue warn]: Failed to resolve component: el-button

Therefore, if you want to create a new DOM and use globally registered components and methods, you cannot use createApp.

After consulting the development tycoon of vue3, we have the following solution: (issues）

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

export default function install (App) {
  let vNode = h({
    data() {
      return {
        isShow: false,
      }
    },
    render() {
      return h(myCom)
    }
  })

  const vNodeDom = ('div')
  (vNodeDom)
   = App._context
  render(vNode, vNodeDom)

  .$show = function () {
     = true
  }

  .$hide = function () {
     = false
  }
}

This time, no new app was created, but instead, the original app context was copied to vNode, thus achieving the sharing of components and public methods.

The newly created plug-in properties and methods are accessed through .

The el-button was also correctly parsed

This is the article about how to write a plug-in for mounting DOM in vue3. For more related content on mounting DOM in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!