Animated Popover component using popper.js for Vue.js

slick-popover is a Vue.js component which allow to display an interactive, animated popover to any DOM element. Useful for display onclick flash messages on your vue app.


npm install vue-slick-popover


Create a popover component together with the trigger element in the template.

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

        <p @closePopover="closePopover">Content</p>

Import the component & stylesheet in your project and Activate the component.

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

export default {
    components: {

    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

See live demo and download source code.


This awesome script developed by mateuszRybczonek, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.