vue-slick-popover

vue-slick-popover

Popover component using popper.js for Vue.js apps

Installation

npm install vue-slick-popover

Documentation

https://vue-slick-popover.netlify.com/docs

Demos

Simple usage

Dropdown menu

Temporary form

Onboarding

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

Publishing

The prepare hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT