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

Last update: Jul 13, 2019

vue-transfer-dom.js

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

install

npm i vue-transfer-dom.js -s

Import transfer-dom directive before creating the Vue instance and initialise the plugin:

import TransferDom from 'vue-transfer-dom.js';

Vue.use(TransferDom);

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

usage

Simply add a directive tag on the element that you wish to transfer.

<div v-transfer-dom>This <div> will be transfered to the end of <body>'s childrendiv>

If you want to transfer the dom to a specific location, or you want to control when to transfer using state, you can add arguments on the directive.

This [div] will replace the node with the `header` id, wherever it is in the DOM

This [div] will be transfered to node with `footer` id
This [div] will also be transfered to node with id `footer`. Notice the single quotes, the value should be a string.

This [div] will be transfered to a node with class `target-class-name`

This [div] will be transfered to [body] and back every 5 seconds

clear's origin content
This div will be transfered to node with id `clear` and remove its original children, and transfer back every 5 seconds.

">
<template>
  <div>
    <hr>
    <div><b>TransferDom for Vue.jsb>div>
    <hr>
    <div v-transfer-dom>This [div] will be transfered to end of [body]'s childrendiv>
    <div v-transfer-dom.prepend>This [div] will be transfered to top of [body]'s childrendiv>
    <hr>
    <div id="header">div>
    <div v-transfer-dom:header.replace>This [div] will replace the node with the `header` id, wherever it is in the DOMdiv>
    <hr>
    <div id="footer">div>
    <div v-transfer-dom:footer>This [div] will be transfered to node with `footer` iddiv>
    <div v-transfer-dom="'#footer'">
      This [div] will also be transfered to node with id `footer`. Notice the single quotes, the value should be a string.
    div>
    <hr>
    <div v-transfer-dom="{ target: '.target-class-name' }">This [div] will be transfered to a node with class `target-class-name`div>
    <div class="target-class-name">div>
    <hr>
    <div v-transfer-dom="{ disable }">This [div] will be transfered to [body] and back every 5 secondsdiv>
    <hr>
    <div id="clear">clear's origin contentdiv>
    <div v-transfer-dom="{ target: '#clear', mode: 'clear', disable }">
      This div will be transfered to node with id `clear` and remove its original children, and transfer back every 5 seconds.
    div>
    <hr>
  div>
template>

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

Options

Target

">
<div v-transfer-dom:target_name>div>
<div v-transfer-dom=" '#target_name' ">div>
<div v-transfer-dom="{ target: '#target_name' }">div>

Set the target element's selector. As in the examples, there are three ways to set the target. You can use the directive's argument to set the target id, or use params to set a selector string. Caution must be taken to specify a string, otherwise you will inadvertently specify a non-existant state variable. See the single quotes in the second div in the example above.

Modifiers & Parameters

You can pass modifiers and parameters to the directive to control its behaviour:

Prepend

">
<div v-transfer-dom.prepend>div>
<div v-transfer-dom="{ mode: 'prepend' }">div>

Adding prepend modifier will cause the node to be transfered to and become first of the target's children. Note that not specifying it has the opposite effect of making it the last of the target's children.

Replace

">
<div v-transfer-dom.replace="{ target: '.header' }">div>
<div v-transfer-dom="{ target: '.header', mode: 'replace' }">div>

Adding the replace modifier will transfer the node to, and replace the target instead of becoming the target's child. Please note that this modifier requires a target, whether specified through the the argument or parameter.

Clear

">
<div v-transfer-dom.clear="{ target: '.header' }">div>
<div v-transfer-dom="{ target: '.header', mode: 'clear' }">div>

Adding the clear modifier will transfer the node to, and clear the target's original children. Please note that this modifier requires a target, whether specified through the the argument or parameter.

Disable

">
<div v-transfer-dom="{ disable: true }">div>

This param can control the state of transfer. You can bind this value to a local var in order to control the transfer, whether to transfer it (false) or put it back to it's previous location (true).

GitHub

https://github.com/tinymins/vue-transfer-dom.js
Comments
  • 1. Support for .replace modifier

    I think package is wonderful, simpler than portal-vue. Question is can't it replace the content of target also much like the prepend modifier?

    something like the following:

    <div v-transfer-dom:footer.replace>thing that should be transferred</div>
    
    Reviewed by emahuni at 2019-07-11 10:54
  • 2. Documentation need to have a bit more examples

    The documentation is lacking some information and explanations as to how to implement it. It says name and instead it's using id or element. It also assumes that we get to what name refers to a-forehand.

    Reviewed by emahuni at 2019-07-11 11:20
  • 3. Support for .clear modifier

    Your implementation of the replace modifier behaviour is ok, however, when I suggested this I was of the impression that it would clear the contents of the target then become its only child instead of destroying the target. I think we can call this new feature i just mentioned here clear so that it is different in a sense and leave replace doing what you just made it do. It could do it this way; in fact I had implemented virtually all of this functionality. Just having a few bugs here and there (in the remove function) so it could just do this:

    let child;
    while((child = parentNode.firstChild)) {
    child.remove()
    }
    

    before it becomes the only child.

    Reviewed by emahuni at 2019-07-12 17:26
  • 4. support for using other selectors such as class etc

    I think it'd be more powerful if it can additionally use if used with { target: "input.class-to-select" } this can be implemented with document.querySelector(target) instead of getElementById(target). The id will only be used if the target is specified as a part of the directive.

    Reviewed by emahuni at 2019-07-11 11:18
  • 5. Support for cloning source element on multiple target nodes

    classes and multiple elements

    When '.class-selector' is used as the target it may result in multiple targets in the NodeList. Instead of ignoring the others and using one, make a clone of the source element for each target node in the Nodelist.

    Reviewed by emahuni at 2019-07-12 17:31
A vue directive to keep dom ratio

vue-keep-ratio [中文项目介绍] As there comes a new css attribute: aspect-ratio, I picked up my old work vue-keep-ratio, use a more adaptive (but hack) way t

Sep 13, 2021
An escape hatch for DOM Elements in Vue.js components.

vue-dom-portal An escape hatch for DOM Elements in Vue.js components. The directive v-dom-portal will move DOM Nodes from their current place in a Vue

Aug 2, 2022
A Vue application that can tell a user what the weather is like over the next 5 days in a location
A Vue application that can tell a user what the weather is like over the next 5 days in a location

VueJS Weather App This app is built with: Vue CLI MetaWeather API Vuetify Vue-chartjs Axios CORS Anywhere Moment.js UI Display Project setup yarn inst

Feb 23, 2022
Potential-ipadresstracker - Potential IP Adress Tracker tracks the location of a given IP Address
Potential-ipadresstracker - Potential IP Adress Tracker tracks the location of a given IP Address

app Project setup npm install Compiles and hot-reloads for development npm run

Jan 22, 2022
A clickable map that generates coordinates and location name based on point randomly placed.

reo-test Project Description A clickable map that generates coordinates and location name based on point randomly placed. This can be useful for ident

Apr 14, 2022
Another Credit Card Component for VueJS
Another Credit Card Component for VueJS

@fracto/vue-credit-card Credit card component for vue Features Note: Localization supports only Turkish & German & English for now. Localization (i18n

Mar 31, 2022
Just another low quality Trello rip off. Built using Vite-VueJS with script setup and TailwindCSS.
Just another low quality Trello rip off. Built using Vite-VueJS with script setup and TailwindCSS.

Vuello Details Just another low quality Trello rip off. Built using Vite-VueJS with script setup and TailwindCSS. live demo : https://kurnyaannn-vuell

Jun 8, 2022
A Vue.js 2 component to clone DOM elements

vue-cloneya A vue component to clone DOM elements Live demo here Install yarn add vue-cloneya # or npm i vue-cloneya Import import Vue from 'vue'

Mar 13, 2021
Vue component to trap the focus within a DOM element

focus-trap-vue Vue component to trap the focus within a DOM element Installation For Vue 2 npm install focus-trap focus-trap-vue For Vue 3 npm install

Jul 22, 2022
Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.
Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.

vue3-touch-events Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x. The easiest way to make your inte

Aug 1, 2022
A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

vue-model-autoset A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive. Imagine a huge form w

Jul 30, 2020
Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation)

vue-spatialnavigation Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation) Installation npm install vue-spatialnavigation --save Sp

May 10, 2022
"View source" directive for Vue

vue-sauce "View source" directive for Vue ?? About Automatically append up-to-date html documentation to your elements. Installation npm install --sav

Jul 11, 2022
Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.

vue-clampy Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. It uses @clampy-

Jul 30, 2022
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Mar 29, 2022
A vue directive which automatically resize font size based on element width.
A vue directive which automatically resize font size based on element width.

Vue Resize Text A vue directive which automatically resize font size based on element width. It makes the font-size flexible on fluid or responsive la

Jul 26, 2022
Vue.js 2.x directive to set a default value for editable elements with no affect to the model state

vue-default-value A Vue.js Directive to set a default value for editable elements with no affect to the model state. Installation Via NPM Install the

Jul 30, 2020
Material Ripple Effect as Vue Directive.

Material Ripple Effect Material Ripple Effect as Vue Directive. This directive it's meant to be used in any element in which you like to achieve such

Jul 5, 2022
Vue.js 2.0 directive to detect images loading
Vue.js 2.0 directive to detect images loading

Vue.ImagesLoaded A Vue.js 2.0 directive to detect when images have been loaded, based on imagesLoaded This directive allows to get a callback when chi

Apr 20, 2022