Skip to content

Latest commit

 

History

History
172 lines (130 loc) · 4.26 KB

README.md

File metadata and controls

172 lines (130 loc) · 4.26 KB
Raw

vue-mount-plugin

A simple and easy to use vue instance extension plugin that supports vue2.0 and vue3.0

NPM version Codacy Badge Test coverage npm download gzip License

Sonar

Installing

# use pnpm
$ pnpm install vue-mount-plugin

# use npm
$ npm install vue-mount-plugin --save

# use yarn
$ yarn add vue-mount-plugin

Usage

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-api to the project.json dependencies 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.

License

MIT