{"id":26623,"library":"vue-use-popperjs","title":"vue-use-popperjs","description":"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.","status":"active","version":"2.3.8","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/iendeavor/vue-use-popperjs","tags":["javascript","tooltip","popover","dropdown","popup","popper","positioning engine","vue-popper.js","vue-popover","typescript"],"install":[{"cmd":"npm install vue-use-popperjs","lang":"bash","label":"npm"},{"cmd":"yarn add vue-use-popperjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-use-popperjs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: Vue 3.2.37+ required","package":"vue","optional":false},{"reason":"runtime dependency for Popper.js positioning engine","package":"@popperjs/core","optional":false}],"imports":[{"note":"Named export, not default.","wrong":"import usePopper from 'vue-use-popperjs'","symbol":"usePopper","correct":"import { usePopper } from 'vue-use-popperjs'"},{"note":"Directive export is PascalCase; use as 'v-popper' in templates.","wrong":"import { vPopper } from 'vue-use-popperjs'","symbol":"VPopper","correct":"import { VPopper } from 'vue-use-popperjs'"},{"note":"Only useful for Vue plugin registration; otherwise use named exports.","wrong":"import { VueUsePopperjs } from 'vue-use-popperjs'","symbol":"default","correct":"import VueUsePopperjs from 'vue-use-popperjs'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport VueUsePopperjs from 'vue-use-popperjs';\n\nconst app = createApp(App);\napp.use(VueUsePopperjs);\n\n// In a component:\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { usePopper } from 'vue-use-popperjs';\n\nconst reference = ref<HTMLElement | null>(null);\nconst popper = ref<HTMLElement | null>(null);\nconst { styles, attributes } = usePopper(reference, popper, {\n  placement: 'bottom',\n  modifiers: [{ name: 'offset', options: { offset: [0, 8] } }]\n});\n</script>\n\n<template>\n  <button ref=\"reference\">Hover me</button>\n  <div ref=\"popper\" :style=\"styles.popper\" v-bind=\"attributes.popper\">\n    Tooltip content\n  </div>\n</template>","lang":"typescript","description":"Shows plugin registration, usePopper composable with TypeScript, and Vue 3 template usage."},"warnings":[{"fix":"Use vue-use-popperjs v1.x for Vue 2 projects.","message":"vue-use-popperjs v2 requires Vue 3 and is not compatible with Vue 2.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Install plugin: app.use(VueUsePopperjs) or import and use VPopper directly.","message":"In v2, the plugin no longer auto-registers the v-popper directive. Must call app.use(VueUsePopperjs) explicitly.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Migrate from v-popper to usePopper composable.","message":"The v-popper directive is deprecated in v2.4+; use the usePopper composable instead.","severity":"deprecated","affected_versions":">=2.4.0"},{"fix":"Cast attributes.value.popper as PopperAttributes if strict types needed.","message":"TypeScript types for attributes.popper are loose; may require manual type assertion for full Popper options.","severity":"gotcha","affected_versions":"*"},{"fix":"Install @popperjs/core@^2.0.0.","message":"The library requires @popperjs/core v2.x; using v1.x will break.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure package is installed: npm install vue-use-popperjs. If using TS, check tsconfig includes node_modules types.","cause":"Missing TypeScript types or incorrect import path.","error":"Cannot find module 'vue-use-popperjs' or its corresponding type declarations."},{"fix":"Import { usePopper } from 'vue-use-popperjs' directly in component instead of relying on global.","cause":"VueUsePopperjs not installed as plugin; usePopper not globally available.","error":"Uncaught (in promise) TypeError: Cannot read properties of null (reading 'usePopper')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}