vue-popper-lite v0.1.5

vue-popper-lite

A popover component based on popper-lite for Vue 3 support typescript

Example

Using Vue Popper Lite from Vue SFC

Vue SFC Playground

Using Vue Popper Lite from CDN

Vue from CDN

Install

NPM

npm install vue-popper-lite

Yarn

yarn add vue-popper-lite

PNPM

pnpm add vue-popper-lite

CDN

Recommended: https://unpkg.com/vue-popper-lite, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popper-lite/

Usage

Vue environment

<!-- If your content is only a simple string, you can use the content prop -->
<template>
  <v-popper content="This is the Popper content">
    <button slot="reference">
      Reference Element
    </button>
  </v-popper>
</template>

<!-- If your content is more complex, you can use the content slot -->
<template>
  <v-popper>
    <div>This is the Popper content</div>
    <template #reference>
        <button>Trigger element</button>
    </template>
  </v-popper>
</template>

<script>
  import { defineComponent } from "vue";
  import { Popper } from "vue-popper-lite";
  import "vue-popper-lite/style.css";

  export default defineComponent({
    components: {
      'VPopper': Popper,
    },
  });
</script>

Props

Events

Slots

CSS variables

Popper also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.

Development Setup

# install dependencies
pnpm install

# build dist files
pnpm build

# build dist files and types
pnpm prepublishOnly