chore: include @popperjs/core

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.4.2",
+    "@popperjs/core": "^2.10.2",
     "@unocss/nuxt": "^0.9.3",
     "gradient-avatar": "^1.0.2",
     "pathe": "^0.2.0"

src/index.ts

@@ -116,5 +116,7 @@ export default defineNuxtModule({
         prefix: _prefix
       })
     })
+
+    nuxt.options.build.transpile.push('@popperjs/core')
   }
 })

src/utils/popper.ts

@@ -0,0 +1,26 @@
+import { ref, onMounted, watchEffect } from 'vue'
+import { createPopper } from '@popperjs/core'
+
+export function usePopper (options: object) {
+  const reference = ref(null)
+  const popper = ref(null)
+
+  onMounted(() => {
+    watchEffect((onInvalidate) => {
+      if (!popper.value) { return }
+      if (!reference.value) { return }
+
+      const popperEl = popper.value.el || popper.value
+      const referenceEl = reference.value.el || reference.value
+
+      if (!(referenceEl instanceof HTMLElement)) { return }
+      if (!(popperEl instanceof HTMLElement)) { return }
+
+      const { destroy } = createPopper(referenceEl, popperEl, options)
+
+      onInvalidate(destroy)
+    })
+  })
+
+  return [reference, popper]
+}

yarn.lock

@@ -599,6 +599,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@rollup/plugin-alias@^3.1.8":
   version "3.1.8"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-3.1.8.tgz#645fd84659e08d3d1b059408fcdf69c1dd435a6b"