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.
AnimatedPopovercomponentpopper.jsforVue.js

Installation

npm install vue-slick-popover

Usage

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

<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 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: {
        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
        }
      }
}

See live demo and download source code.

DEMO | DOWNLOAD

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.