vue-mount-plugin
A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0
Installing
# use pnpm
$ pnpm install vue-mount-plugin
# use npm
$ npm install vue-mount-plugin --save
# use yarn
$ yarn add vue-mount-pluginUsage
Use in Vue >=3.0
<!-- test.vue -->
<script setup>
import { getCurrentInstance } from 'vue'
import Mount from 'vue-mount-plugin'
import DemoVue from './demo.vue'
const { proxy } = getCurrentInstance()
const instance = new Mount(DemoVue, { parent: proxy.$root })
// mount to the end of document.body
instance.mount()
// unmount
instance.unmount()
</script>Use in Vue 2.7
<!-- test.vue -->
<script>
import { getCurrentInstance } from 'vue'
import Mount from 'vue-mount-plugin'
import DemoVue from './demo.vue'
export default {
setup() {
const { proxy } = getCurrentInstance()
const instance = new Mount(DemoVue, { parent: proxy.$root })
// mount to the end of document.body
instance.mount()
// unmount
instance.unmount()
}
}
</script>Use in Vue <=2.6
Add
@vue/composition-apito theproject.jsondependencies and run install.
{
"dependencies": {
"@vue/composition-api": "latest"
}
}<!-- test.vue -->
<script>
import { getCurrentInstance } from '@vue/composition-api'
import Mount from 'vue-mount-plugin'
import DemoVue from './demo.vue'
export default {
setup() {
const { proxy } = getCurrentInstance()
const instance = new Mount(DemoVue, { parent: proxy.$root })
// mount to the end of document.body
instance.mount()
// unmount
instance.unmount()
}
}
</script>Import in Browser
Import vue-mount-plugin through browser HTML tags directly, and use global variable VueMount.
<head>
<!-- Import vue3 or vue2 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import vue-mount-plugin library -->
<script src="//unpkg.com/vue-mount-plugin@3.0.0/dist/index.global.prod.js"></script>
</head><!-- test.vue -->
<script>
import { getCurrentInstance } from '@vue/composition-api'
import DemoVue from './demo.vue'
export default {
setup() {
const { proxy } = getCurrentInstance()
const instance = new VueMount(DemoVue, { parent: proxy.$root })
// mount to the end of document.body
instance.mount()
// unmount
instance.unmount()
}
}
</script>Support & Issues
Please open an issue here.