You can implement Popover component using popper.js for Vue.js apps

vue-slick-popover

Popover component using popper.js for Vue.js apps

Installation

npm install vue-slick-popover

Usage

<template>
  <div id="app">
    <img ref="popoverReference" width="20%" src="./assets/logo.png" @click="openPopover">

    <VueSlickPopover
      v-if="isPopoverVisible"
      :popover-options="popoverOptions"
      @closePopover="closePopover"
    >
      <VueSlickPopoverContent>
        <p @closePopover="closePopover">Content</p>
      </VueSlickPopoverContent>
    </VueSlickPopover>
  </div>
</template>

import Vue from "vue"
import { VueSlickPopover, VueSlickPopoverContent } from "vue-slick-popover"
import "vue-slick-popover/dist/vue-slick-popover.css"

export default {
    components: {
        VueSlickPopover,
        VueSlickPopoverContent
    },

    data() {
        return {
          isPopoverVisible: false,
          popoverOptions: {
            animation: "scale-fade",
            popoverReference: null,
            placement: "top",
            offset: "0,0"
          }
        }
      },

      mounted() {
        this.popoverOptions.popoverReference = this.$refs.popoverReference
      },

      methods: {
        closePopover() {
          this.isPopoverVisible = false
        },

        openPopover() {
          this.isPopoverVisible = true
        }
      }
}

Development

Launch visual tests

npm run watch

Build

Bundle the js and css of to the dist folder:

npm build