vue-teledom

A directive supported plugin for transfering DOM to another location in Vue.js components.

install

npm i vue-teledom -s

Import teledom component before create Vue instance:

1import Teledom from 'vue-teledom';
2
3Vue.use(Teledom);
4
5// ...
6new Vue({
7  render: h => h(App),
8}).$mount('#app');

usage

You can simply add a directive tag to start using.

1<div v-teledom>This text will be transfered to end of body</div>

If you want to transfer dom to a specific location, or you want to switch when to transfer, you can add the id of the dom element as argument on directive.

1<template>
2  <div>
3    <div>Teledom for Vue.js</div>
4    <div v-teledom>This text will be transfered to end of body</div>
5    <div v-teledom.prepend>This text will be transfered to top of body</div>
6    <div v-teledom:footer>This text will be transfered to node named `footer`</div>
7    <div v-teledom="{ target: '#footer' }">This text will also be transfered to node with id `footer`</div>
8    <div v-teledom="{ disable }">This text will be transfered to body and transfer back every 5 seconds (see script for 'disable' var driving logic)</div>
9  </div>
10</template>
11
12<script>
13export default {
14  data() {
15    return {
16      disable: false,
17    };
18  },
19  mounted() {
20    setInterval(() => {
21      this.disable = !this.disable;
22    }, 5000);
23  },
24};
25</script>

Meanwhile, somewhere else in the dom, in a component or even out of vue's app:

1<div id="footer">
2    content will be appended/prepended here
3</div>

Notes:

• The value of target, in the directive's value, should always be a css selector that is usable by document.querySelector.
• The directive argument should always be an element id
• You can't use both target methods, if you do the directive argument will take precedence.
• If the target results in multiple elements then it will use those elements as targets, making copies of itself everywhere

Options:

name - name of the directive on vue components debug - whether to show debug information or not. True/1 shows basic warning information useful during development. 2 shows some debug information and 3 or above shows extra debug information.

Example:

For clear example on how to use this directive, see the example in the src.

Authors:

Emmanuel Mahuni and Emil Zhai