Package Exports

vue-use-popperjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-use-popperjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue-use-popperjs

The usePopperjs hook provides an API identical to the ones of createPopper constructor.

Install

Note: vue@next and @popperjs/core@2 must be installed in your project in order for vue-use-popperjs to work.

Via package managers:

# With npm
npm i vue-use-popperjs @popperjs/core

# With Yarn
yarn add vue-use-popperjs @popperjs/core

Via script tag (UMD library exposed as VueUsePopperjs):

<script src="https://unpkg.com/vue-use-popperjs/dist/umd/index.js"></script>

Example

<template>
  <button ref="reference">My button</button>
  <div id="popper" ref="popper">My popper</div>
</template>

<script>
  import { defineComponent, ref } from 'vue'
  import { usePopperjs } from 'vue-use-popperjs'

  export default defineComponent({
    setup() {
      const reference = ref()
      const popper = ref()

      usePopperjs(reference, popper)

      return {
        reference,
        popper,
      }
    },
  })
</script>

<style>
  :global(.vue-use-popperjs-none) {
    visibility: hidden;
    pointer-events: none;
  }
</style>

API

Parameters

Reference

Popper

Option

Option	Default	Type	Description
placement	-	-	See popper.js options
modifiers	-	-	See popper.js options
strategy	-	-	See popper.js options
onFirstUpdate	-	-	See popper.js options
trigger	`'hover'`	`'hover' \| 'focus' \| 'click-to-toggle' \| 'click-to-open' \| 'manual'`	`hover` - open popper when hovering reference `focus`: open popper when focusing on reference, hide popper on blur `click-to-open`: click reference toggles popper's visibility `click-to-open`: open popper when clicking reference, click outside to hide popper `manual`: manually change popper's the visible of returned value
delay-on-mouseover	`200`	`number`	Delay in ms before showing popper during the mouseover event, only applicable for `trigger='hover'`
delay-on-mouseout	200	number	Delay in ms before hiding popper during the mouseout event, only applicable for `trigger='hover'`
force-show	false	boolean	Force show the popper even manually (see the visible of returned value) close it

Return

Key	Type	Description
instance	`Object`	Popperjs instance
visible	`Ref<boolean>`	Allow to manually set this value to show/hide popper