vue3-popper

vue3-popper

A popover component for Vue 3

Documentation

Check out the documentation

• Getting started
• Usage

Install

NPM

npm install vue3-popper

Yarn

yarn add vue3-popper

Usage

Vue environment

<template>
  <Popper>
    <button>Trigger element</button>
    <template #content>
      <div>This is the Popper content</div>
    </template>
  </Popper>
</template>

<script>
  import { defineComponent } from "vue";
  import Popper from "vue3-popper";

  export default defineComponent({
    components: {
      Popper,
    },
  });
</script>

Props

Name	Default	Description
placement	bottom	Preferred placement of the popover
offset	12	Distance in pixels from the trigger element
hover	false	Trigger the popover on hover
arrow	false	Display an arrow on the popover

Events

Name	Description
show:popper	When the popover is shown
hide:popper	When the popover is hidden

Slots

Name	Description
content	For the popover content