p4sca1 / nuxt-headlessui Goto Github PK

I had a hydration error in my local environment while using this library. After some digging, I found this thread tailwindlabs/headlessui#1496 where they basically said that you should wrap the Dialog component in a <client-only> tag. It makes sense (and fixed my problem), but I would suggest adding this to the readme so other people could easily take note of this.

Nuxt Config Details:

export default defineNuxtConfig({
devtools: { enabled: true },
modules: [
'@nuxtjs/tailwindcss',
'nuxt-headlessui',
],
css: [
'@/assets/main.css',
],

})

Package Details:

"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/tailwindcss": "^6.7.0",
"@types/node": "^18",
"nuxt": "^3.5.2",
"nuxt-headlessui": "^1.1.4"
}

Following errors I'm getting:

[Vue warn]: Failed to resolve component: Combobox 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxButton 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxInput 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: TransitionRoot 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxOptions 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxOption 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[8:29:55 PM] [nuxt] [request error] [unhandled] [500] Cannot destructure property 'selected' of 'undefined' as it is undefined.

How to implement @headlessui-tailwindcss?

I'm fairly new to nuxt and jamstacks in general, so I'm happy to learn and help with testing.

I've just discovered healdess ui and since I'm using nuxt I've found this repo, but one tool that would be usefull is @headlessui-tailwind. Basically it lets me style based on the state of the component using tailwind's utility classes.

Even if I change plugins: [require('@headlessui/tailwindcss')], to plugins: [require('nuxt-headlessui',)], inside tailwind.config.js

Is there a list of client only components. With big components, it's hard to find out which part of the component should be wrapped in the tag.

Hi there,

I am having an issue with the Dialog component in version 1.1.0. When I try to import it in my pages/index.vue and build the project, I get the following error:

 ERROR  'Dialog' is not exported by node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/app/components/server-placeholder.mjs, imported by pages/index.vue?vue&type=script&setup=true&lang.ts                                                                                                                                                                                                              02:19:33
file: /home/dreamingcodes/Desktop/event-scheduler/pages/index.vue?vue&type=script&setup=true&lang.ts:9:9
 7: import { default as __nuxt_component_6 } from "/home/dreamingcodes/Desktop/event-scheduler/node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/app/components/client-only";
 8: import { TransitionRoot as __nuxt_component_7 } from "/home/dreamingcodes/Desktop/event-scheduler/node_modules/.pnpm/@[email protected]/node_modules/@headlessui/vue/dist/components/transitions/transition.js";
 9: import { Dialog as __nuxt_component_8 } from "/home/dreamingcodes/Desktop/event-scheduler/node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/app/components/server-placeholder";
             ^
10: import { TransitionChild as __nuxt_component_9 } from "/home/dreamingcodes/Desktop/event-scheduler/node_modules/.pnpm/@[email protected]/node_modules/@headlessui/vue/dist/components/transitions/transition.js";
11: import { DialogPanel as __nuxt_component_10 } from "/home/dreamingcodes/Desktop/event-scheduler/node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/app/components/server-placeholder";


 ERROR  'Dialog' is not exported by node_modules/.pnpm/[email protected][email protected]/node_modules/nuxt/dist/app/components/server-placeholder.mjs, imported by pages/index.vue?vue&type=script&setup=true&lang.ts                                                                                                                                                                                                              02:19:33

  at error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
  at Module.error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:12429:16)
  at Module.traceVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:12788:29)
  at ModuleScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:11440:39)
  at FunctionScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:6372:38)
  at ChildScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:6372:38)
  at ReturnValueScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:6372:38)
  at ChildScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:6372:38)
  at Identifier.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:7439:40)
  at VariableDeclarator.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:5269:23)

My project deps:

  "devDependencies": {
    "@morev/vue-transitions": "^2.3.5",
    "@nuxt/image-edge": "1.0.0-27840416.dc1ed65",
    "@nuxtjs/color-mode": "^3.2.0",
    "@nuxtjs/robots": "^3.0.0",
    "@nuxtjs/tailwindcss": "^6.2.0",
    "@prisma/client": "^4.8.1",
    "@sidebase/nuxt-auth": "^0.3.3",
    "@types/animejs": "^3.1.6",
    "animejs": "^3.2.1",
    "nuxt": "3.0.0",
    "nuxt-headlessui": "^1.1.0",
    "prisma": "^4.8.1",
    "sass": "^1.57.1"
  }

This error did not occur in previous versions.

HeadlessUI deployed a fix for Nuxt hydration error for generated ids.

Reference: tailwindlabs/headlessui#2913

Multiple bugs we've encountered with headlessui has been fixed in its insiders version, but I haven't figured out way to use nuxt3 with insiders version: https://github.com/tailwindlabs/headlessui#installing-the-insiders-version . Anyone has ideas how to make that possible?

Thank you.

Hi! Following up nuxt/modules#476, Really nice and minimal module love it! There is only one small issue i could find while doing review. Since @headlessui/vue is a _nested dependency of your module, when calling resolvePath you might need to set second argument paths that includes node_modules/@headlessui actually. Nuxt will by default search in user node_modules which is assumption that users directly added @headlessui/vue to their dependencies as a peer dependency.

Wrapping it in ClientOnly fixes it but will be better if the generated id matches and the component is rendered server side.

<Disclosure v-slot="{ open }">
    <DisclosureButton
      class="row text-center w-full flex items-center m-0 py-2"
    >
    Button
      <div class="col-md-1 justify-end flex">
        <ChevronUpIcon
          :class="!open ? 'rotate-180 transform' : ''"
          class="h-7 w-7 text-sky-800 self-center flex"
        />
      </div>
    </DisclosureButton>
      <DisclosurePanel
        class="text-gray-500 py-2 text-center"
      >
      Expanded content
      </DisclosurePanel>
  </Disclosure>
  

Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom.

This error cause and also flicker when using tabs when using this module and also when using raw headless UI module

If we wrap client only

 <ClientOnly>
  <TabGroup>
    .....
  </TabGroup>
</ClientOnly

or use transpile in config

  build: {
     transpile: ['@headlessui/vue'],
   },

but flicker effect remain same it because of client rendering

Great Nuxt module! ✨

I wonder whether it would make more sense to set the default prefix to HeadlessUi instead? This makes it more distinctive and whoever reads the code knows immediately where the component comes from. Headless on its own could be, in theory, related to anything (e.g. a component coming from a headless CMS).

Creating a

<HeadlessMenu>
  <HeadlessMenuButton>
    <div class="flex items-center w-full">
      <div>
        <img class="h-8 w-8 rounded-full bg-gray-50"
             src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
             alt="" />
      </div>
    </div>
  </HeadlessMenuButton>
  <transition enter-active-class="transition duration-100 ease-out"
              enter-from-class="transform scale-95 opacity-0"
              enter-to-class="transform scale-100 opacity-100"
              leave-active-class="transition duration-75 ease-in"
              leave-from-class="transform scale-100 opacity-100"
              leave-to-class="transform scale-95 opacity-0">
    <HeadlessMenuItems>
      <HeadlessMenuItem v-slot="{ active }">
        <button>
          Edit
        </button>
      </HeadlessMenuItem>
    </HeadlessMenuItems>
  </transition>
</HeadlessMenu>

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@nuxt/eslint-config, @nuxt/module-builder, @nuxtjs/tailwindcss, @types/node, cimg/node, pnpm, semantic-release)
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency semantic-release to v24
• chore(deps): update node.js to v22
• chore(deps): update pnpm to v9
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update node.js to v21

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

it's giving a warning on the console, I'm using nuxt 3, I've already added the parameter below to my nuxt.config.ts and still the warning.

build: {
analyze: true,
transpile: ['@headlessui/vue']
}

I get this error: 500 useId is not defined

When using: provideHeadlessUseId(() => useId()); in app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
provideHeadlessUseId(() => useId());
</script>

Using the Menu component (for example) throws a bunch of errors:

Console errors:

[Vue warn]: provide() can only be used inside setup().
[Vue warn]: provide() can only be used inside setup().
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Unhandled error during execution of setup function at

On-Screen Errors:

Cannot read properties of undefined (reading 'buttonRef')

Solution

tailwindlabs/headlessui#982

Adding

build: {
    transpile: ["@headlessui/vue"],
 },

to nuxt.config.js resolves this.

It's just a minor inconvenience but still annoying. Don't know if this is something that can be fixed here or maybe there's another solution.

Thanks in advance!