vue-render-to v1.0.2

vue-render-to

Vue directive that renders element to another element (by id) located anywhere in the DOM.

Moved component keeps all bindings and behaves like normal Vue component.

Destination id can be changed dynamically.

Installation

Install package

npm install vue-render-to --save

Install directive

import RenderToDirective from "vue-render-to";

Vue.directive("render-to", RenderToDirective);

Usage

Provide id of destination element in the directive:

<div v-render-to="'destination-id'">My awesome div</div>

If destination element doesn't exist in the DOM, you will get warning in console and div won't be moved.

Supported modifiers:

prepend

<div v-render-to.prepend="'destination-id'">My awesome div</div>

When not provided, appendChild method will be used by default

Extending code

You can write your own directive based on code of this directive.

For that you can extend directive's class:

import { RenderTo } from "vue-render-to";

class MyDirective extends RenderTo {
  // Your code
}