vue3-popper

The library provides the following capabilities:

• Simple API: Easy to integrate into Vue 3 applications.
• Customizable theme: Allows for visual adjustments to the popover.
• Arrow support: Can display arrows to point to the trigger element.
• Modern Stack: Built specifically for Vue 3 and Popper 2.

You can install the vue3-popper package using either npm or yarn.

npm install vue3-popper
# or
yarn add vue3-popper

To define what appears inside the popover, you can either use the content prop for simple strings or the #content slot for complex HTML/components.

<!-- Using the content prop for simple strings -->
<template>
  <Popper content="This is the Popper content">
    <button>Trigger element</button>
  </Popper>
</template>

<!-- Using the #content slot for complex content -->
<template>
  <Popper>
    <button>Trigger element</button>
    <template #content>
      <div>This is the Popper content</div>
    </template>
  </Popper>
</template>

Install vue3-popper using your preferred package manager.

# Using yarn
$ yarn add vue3-popper

# Using NPM
$ npm i vue3-popper

You can register the Popper component globally in your Vue application or import it locally for specific components.

// Global registration
import { createApp } from "vue";
import Popper from "vue3-popper";

const app = createApp({});
app.component("Popper", Popper);

<!-- Local registration -->
<template>
  <Popper content="This is the Popper content 🍿">
    <button>Trigger element</button>
  </Popper>
</template>

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

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

To improve modularity and scalability, you can wrap Popper in your own component. This allows you to hardcode certain behaviors (like hover or openDelay) and provide a single point of change for your application.

<template>
  <!-- Hardcoded "hover", "openDelay" and "closeDelay" -->
  <Popper v-bind="$attrs" hover openDelay="200" closeDelay="100">
    <slot />
    <template #content="props">
      <slot name="content" v-bind="props" />
    </template>
  </Popper>
</template>

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

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

If you prefer not to use CSS variables, you can apply custom styles directly to the .popper class. When using <style scoped>, you must use the :deep() selector to target the Popper's internal elements.

<style scoped>
  :deep(.popper) {
    background: #e92791;
    padding: 20px;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
  }

  :deep(.popper #arrow::before) {
    background: #e92791;
  }

  :deep(.popper:hover),
  :deep(.popper:hover > #arrow::before) {
    background: #e92791;
  }
</style>

The Popper component uses a set of predefined CSS variables that you can overwrite to change its appearance. You can apply these globally via :root or locally within a component.

:root {
  --popper-theme-background-color: #333333;
  --popper-theme-background-color-hover: #333333;
  --popper-theme-text-color: #ffffff;
  --popper-theme-border-width: 0px;
  --popper-theme-border-style: solid;
  --popper-theme-border-radius: 6px;
  --popper-theme-padding: 32px;
  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}

You can listen to built-in events to trigger side-effects when the Popper opens or closes using @open:popper and @close:popper.

<template>
  <Popper
    arrow
    @open:popper="openAlert"
    @close:popper="closeAlert"
    content="This is the Popper content 🍿"
  >
    <Button>Demo</Button>
  </Popper>
</template>

<script>
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "PopperEvents",
    methods: {
      openAlert() {
        alert("Opening Popper!");
      },
      closeAlert() {
        alert("Closing Popper!");
      },
    },
  });
</script>