Skip to content

A Vue directive for hoisting DOM elements to a higher parent node.

License

Notifications You must be signed in to change notification settings

tserkov/vue-directive-hoist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

vue-directive-hoist license

A Vue directive for hoisting DOM elements to a higher parent node.

Install

# npm
npm install --save vue-directive-hoist
# yarn
yarn add vue-directive-hoist

Use

// In main.js
import Hoist from 'vue-directive-hoist';

Vue.use(Hoist);
<!-- In a component -->
<template>
  <div class="modal" v-hoist>
    <div class="modal-content">
      <p>
        A common use case for hoist is to place modals as a direct descendant of body,
        so it can properly overlay the page.
      </p>
    </div>
  </div>
</template>

If no value is provided, by default the element is hoisted to <body>.