FloatContextMenu throws error in Nuxt 3

[BayBreezy]

Use Version Use version when bugs appear:

• Headless UI: v1.7.14
• Nuxt Headless UI
• Headless UI Float(Vue): v1.1.4
• Framework: NuxtJS
• Browser Chrome

Describe the bug I get an error on the browser that says "Node is not defined". This only happens when i try to use the FloatContextMenu component. Below are the logs:

500
Node is not defined

at ReactiveEffect.fn (./node_modules/@headlessui-float/vue/dist/headlessui-float.mjs:468:11)
at ReactiveEffect.run (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:162:19)
at ComputedRefImpl.get value [as value] (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:1143:33)
at P (./node_modules/@headlessui-float/vue/dist/headlessui-float.mjs:480:7)
at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18)
at callWithAsyncErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:164:17)
at ReactiveEffect.job [as scheduler] (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1752:9)
at triggerEffect (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:373:15)
at triggerEffects (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:363:7)

In the VSCode terminal, I also get this: [Vue warn]: provide() can only be used inside setup().

To Reproduce Here is the code used that caused the error:

<template>
  <div class="container py-5">
    <div ref="vl" class="w-full bg-gray-200 rounded-lg h-52">
      <FloatContextMenu v-slot="{ close }" :z-index="999">
        <HeadlessMenu>
          <HeadlessMenuItems
            static
            class="w-48 bg-white border border-gray-200 rounded-md shadow-lg overflow-hidden focus:outline-none"
          >
            <HeadlessMenuItem v-slot="{ active }">
              <button
                type="button"
                class="block w-full px-4 py-1.5 text-left text-sm"
                :class="{ 'bg-indigo-500 text-white': active }"
                @click="close"
              >
                Edit
              </button>
            </HeadlessMenuItem>
            <HeadlessMenuItem v-slot="{ active }">
              <button
                type="button"
                class="block w-full px-4 py-1.5 text-left text-sm"
                :class="{ 'bg-indigo-500 text-white': active }"
                @click="close"
              >
                Cut
              </button>
            </HeadlessMenuItem>
            <div class="my-1 border-b border-gray-100" />
            <HeadlessMenuItem v-slot="{ active }">
              <button
                type="button"
                class="block w-full px-4 py-1.5 text-left text-sm"
                :class="{ 'bg-indigo-500 text-white': active }"
                @click="close"
              >
                Other
              </button>
            </HeadlessMenuItem>
          </HeadlessMenuItems>
        </HeadlessMenu>
      </FloatContextMenu>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { FloatContextMenu } from "@headlessui-float/vue";

  const vl = ref<HTMLElement | null>(null);
</script>

Screenshots Browser:

Expected behavior I expected the context menu to work as normal

[gustojs]

You can prevent the error by wrapping <FloatContextMenu /> with <ClientOnly />. You don't need context menu in SSR generated content anyways.

[BayBreezy]

OMG... How did I not try this. Thank you @gustojs This worked. Closing this one