[Vue warn]: Unknown custom element: <HeadlessDialog> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

P4sca1 / nuxt-headlessui

Headless UI integration for Nuxt. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

MIT License

168 stars 7 forks source link

[Vue warn]: Unknown custom element: <HeadlessDialog> - did you register the component correctly? For recursive components, make sure to provide the "name" option. #23

Closed zerocool14pvo closed 1 year ago

zerocool14pvo commented 1 year ago


"nuxt": "^2.15.8",
"nuxt-headlessui": "^1.1.1",

<ClientOnly>
    <HeadlessDialog :open="isOpen" @close="$emit('close')">
      <HeadlessDialogPanel>
        <HeadlessDialogTitle v-if="title">{{ title }}</HeadlessDialogTitle>
        <HeadlessDialogDescription v-if="desc"> {{ desc }} </HeadlessDialogDescription>
        <slot />
      </HeadlessDialogPanel>
    </HeadlessDialog>
  </ClientOnly>

zerocool14pvo commented 1 year ago

P4sca1 commented 1 year ago

Could you provide a reproduction, please?

zerocool14pvo commented 1 year ago

Could you provide a reproduction, please?

I don't quite understand the question?

Installed nuxt-headlessui package
Added 'nuxt-headlessui' to modules
Added component

anirudhge commented 1 year ago

I'm having the same issue, headlessui is not auto imported by Nuxt. I need to manually import components.

P4sca1 commented 1 year ago

@siarheiSiniauski @anirudhge Could you provide more context, please? Dialogs are testend in the playground, and they work without a problem. Remember to wrap them in `ClientOnly´.

P4sca1 commented 1 year ago

Closing due to inactivity