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