vue2-transfer-dom

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.

Installation

download or point your package.json to a fork of this repo

Usage

 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

Contribution

Requirements

node >=14.17.5
pnpm >= 6.14.2

Credits

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.

Dependencies

@rollup/plugin-node-resolve: ^11.2.0 @typescript-eslint/eslint-plugin: ^4.32.0 @typescript-eslint/parser: ^4.32.0 @vue/eslint-config-prettier: ^6.0.0 @vue/eslint-config-typescript: ^7.0.0 eslint: ^7.32.0 eslint-plugin-prettier: ^4.0.0 eslint-plugin-vue: ^6.2.2 lint-staged: ^9.5.0 npm-run-all: ^4.1.5 prettier: ^2.4.1 rimraf: ^3.0.2 rollup: ^2.57.0 rollup-plugin-terser: ^7.0.2 rollup-plugin-typescript2: ^0.30.0 typescript: ~4.4.3 vue: >=2.2.0