Registry / web-framework / vue-use-popperjs

vue-use-popperjs

library2.3.8jsnpmunverified

Vue 3 composable and directive for integrating Popper.js v2.x positioning engine. Current stable version 2.3.8, actively maintained. Provides both a usePopper composable and a v-popper directive for tooltips, popovers, and dropdowns. Ships TypeScript definitions. Peer dependency on Vue 3.2.37+. Key differentiator: lightweight, composable-first approach vs heavier alternatives like Vuetify tooltips.

web-framework

npm install vue-use-popperjs

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-USE-POPPERJS

vue-use-popperjs

web-frameworkjavascriptv2.3.8

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

usePopper

✓ import { usePopper } from 'vue-use-popperjs'

✗ import usePopper from 'vue-use-popperjs'

Named export, not default.

VPopper

✓ import { VPopper } from 'vue-use-popperjs'

✗ import { vPopper } from 'vue-use-popperjs'

Directive export is PascalCase; use as 'v-popper' in templates.

default

✓ import VueUsePopperjs from 'vue-use-popperjs'

✗ import { VueUsePopperjs } from 'vue-use-popperjs'

Only useful for Vue plugin registration; otherwise use named exports.

Shows plugin registration, usePopper composable with TypeScript, and Vue 3 template usage.

import { createApp } from 'vue'; import App from './App.vue'; import VueUsePopperjs from 'vue-use-popperjs'; const app = createApp(App); app.use(VueUsePopperjs); // In a component: <script setup lang="ts"> import { ref } from 'vue'; import { usePopper } from 'vue-use-popperjs'; const reference = ref<HTMLElement | null>(null); const popper = ref<HTMLElement | null>(null); const { styles, attributes } = usePopper(reference, popper, { placement: 'bottom', modifiers: [{ name: 'offset', options: { offset: [0, 8] } }] }); </script> <template> <button ref="reference">Hover me</button> <div ref="popper" :style="styles.popper" v-bind="attributes.popper"> Tooltip content </div> </template>

Debug

Known issues

breakingvue-use-popperjs v2 requires Vue 3 and is not compatible with Vue 2.

fix

Use vue-use-popperjs v1.x for Vue 2 projects.

affects: >=2.0.0

breakingIn v2, the plugin no longer auto-registers the v-popper directive. Must call app.use(VueUsePopperjs) explicitly.

fix

Install plugin: app.use(VueUsePopperjs) or import and use VPopper directly.

affects: >=2.0.0

deprecatedThe v-popper directive is deprecated in v2.4+; use the usePopper composable instead.

fix

Migrate from v-popper to usePopper composable.

affects: >=2.4.0

gotchaTypeScript types for attributes.popper are loose; may require manual type assertion for full Popper options.

fix

Cast attributes.value.popper as PopperAttributes if strict types needed.

affects: *

gotchaThe library requires @popperjs/core v2.x; using v1.x will break.

fix

Install @popperjs/core@^2.0.0.

affects: *

Errors

Common errors & fixes

Cannot find module 'vue-use-popperjs' or its corresponding type declarations.

Missing TypeScript types or incorrect import path.

fix

Ensure package is installed: npm install vue-use-popperjs. If using TS, check tsconfig includes node_modules types.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'usePopper')

VueUsePopperjs not installed as plugin; usePopper not globally available.

fix

Import { usePopper } from 'vue-use-popperjs' directly in component instead of relying on global.

Upgrade

Version history

2.3.8latest on npm

Audit

Dependencies

vuerequiredpeer dependency: Vue 3.2.37+ required

@popperjs/corerequiredruntime dependency for Popper.js positioning engine

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/iendeavor/vue-use-popperjs ↗

packagehttps://www.npmjs.com/package/vue-use-popperjs ↗

homepagehttps://vue-use-popperjs.netlify.app ↗