Vue-directive-hoist NPM

vue-directive-hoist

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

Install

# npm
npm install --save-dev vue-directive-hoist

# yarn
yarn add --dev 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>.

@infinitebrahmanuniverse/nolb-vue-di @everything-registry/sub-chunk-3078

1.0.0

8 years ago