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:

import Teledom from 'vue-teledom';

Vue.use(Teledom);

// ...
new Vue({
  render: h => h(App),
}).$mount('#app');

usage

You can simply add a directive tag to start using.

<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.

<template>
  <div>
    <div>Teledom for Vue.js</div>
    <div v-teledom>This text will be transfered to end of body</div>
    <div v-teledom.prepend>This text will be transfered to top of body</div>
    <div v-teledom:footer>This text will be transfered to node named `footer`</div>
    <div v-teledom="{ target: '#footer' }">This text will also be transfered to node with id `footer`</div>
    <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      disable: false,
    };
  },
  mounted() {
    setInterval(() => {
      this.disable = !this.disable;
    }, 5000);
  },
};
</script>

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

<div id="footer">
    content will be appended/prepended here
</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