requires Vue v2.+
Transfer DOM to another place (eg. <body>).
Note this physically moves the element, some parts of vue dont like this.
Caveat: This directive has not fuly tested yet.
Useful in some situations such as z-index management, see discussion here.
download or point your package.json to a fork of this repo
import { VueTransferDom } from 'vue2-transfer-dom';
Vue.use(VueTransferDom /*, {name: 'transferDom'}*/);
new Vue({
// div will be appended to body(default)
template: '<div v-transfer-dom>foo</div>'
});
// prepend to body
new Vue({
// div will be prepended to body(default)
template: '<div v-transfer-dom.prepend>foo</div>'
});Move to a specific target element identifed by target's id:
// append to specific place
new Vue({
// div will be appended to #bar(document.getElementById)
template: '<div v-transfer-dom:bar>foo</div>'
});
// prepend to specific place
new Vue({
// div will be prepended to #bar(document.getElementById)
template: '<div v-transfer-dom:bar.prepend>foo</div>'
});
// replace the content of an element
new Vue({
// div will replace the content of #bar(document.getElementById)
template: '<div v-transfer-dom:bar.replace>foo</div>'
})Note: If appending, prepending or replacing a non-existant target element, an error will be logged and the element will not be moved. If you use both replace and prepend, the target element will be replaced
- node >=14.17.5
- pnpm >= 6.14.2
Based on https://github.com/rhyzx/vue-transfer-dom for Vue 1.x and https://github.com/tmorehouse/vue-transfer-dom for the Vue 2 port.