Nuxt 4 Support

[rocketiscool]

Looking to migrate to Nuxt 4 now that it has been released. This is a core UI module so can't upgrade my project until it's been updated to support it.

Any works happening on that?

[dvogelg4al]

+1

[bcalero7]

Bump

[DamianGlowala]

@P4sca1 as this has already been addressed in https://github.com/P4sca1/nuxt-headlessui/pull/51, could you please release a new version?

[jeffreyvdhondel]

I have workaround this issue with an patch

To apply a patch using pnpm, you need to modify your package.json and create a patch file. Here's how:

1. Modify package.json:

{
  "pnpm": {
    "patchedDependencies": {
      "nuxt-headlessui": "patches/nuxt-headlessui.patch"
    }
  }
}

2. Add patches/nuxt-headlessui.patch

index f82da990e732688b264f7e4633bdb27a1bf92b07..e412546271e104217089db49f59b877e2b789eaa 100644
--- a/dist/module.mjs
+++ b/dist/module.mjs
@@ -99,7 +99,7 @@ const module = defineNuxtModule({
     name: "nuxt-headlessui",
     configKey: "headlessui",
     compatibility: {
-      nuxt: "^3.0.0",
+      nuxt: ">=3.0.0",
       bridge: true
     }
   },

[dvogelg4al]

@jeffreyvdhondel 's solution worked perfectly for me though the process was slightly different for me as I'm using bun:

1. While in the root of the project, in the terminal enter: bun patch nuxt-headlessui

The terminal will then indicate the following:

To patch nuxt-headlessui, edit the following folder:

  node_modules/nuxt-headlessui

Once you're done with your changes, run:

  bun patch --commit 'node_modules/nuxt-headlessui'

2. Find the node_modules/nuxt-headlessui and edit the compatibility section in const module in module.mjs to look as follows:

const module = defineNuxtModule({
  meta: {
    name: "nuxt-headlessui",
    configKey: "headlessui",
    compatibility: {
      nuxt: ">=3.0.0",
      bridge: true
    }
  },

3. Run bun patch --commit 'node_modules/nuxt-headlessui' and that should do it.

[P4sca1]

I will look into this today. Sorry for the delay!

[P4sca1]

I released version 1.2.1. It is a rebuild of the same source code with the latest nuxt kit and module builder. It also includes the update to meta.compatibility.nuxt.

Could you please confirm that 1.2.1 is working in Nuxt 4? It worked fine for me in the Nuxt 4 playground, as well as in a Nuxt 3 project with compatibilityVersion: 4.

[jeffreyvdhondel]

I released version 1.2.1. It is a rebuild of the same source code with the latest nuxt kit and module builder. It also includes the update to meta.compatibility.nuxt.

Could you please confirm that 1.2.1 is working in Nuxt 4? It worked fine for me in the Nuxt 4 playground, as well as in a Nuxt 3 project with compatibilityVersion: 4.

Yes it is working thanks for the fast response!

[dvogelg4al]

In a Nuxt 4 project I just removed the patch from yesterday and downloaded the update. The warning no longer appears and the headless components appear to be working as usual. Thanks for the update!

I do see the following warning which may or may not be related but it still works for now: WARN You or a plugin you are using have set optimizeDeps.esbuildOptions but this option is now deprecated. Vite now uses Rolldown to optimize the dependencies. Please use optimizeDeps.rollupOptions instead.

[idesignzone]

Getting this error during build

[commonjs--resolver] Cannot split a chunk that has already been edited (0:2847 – "C(()=>{let o=D(c);z(o)})")
file: .../node_modules/@headlessui/vue/dist/components/transitions/transition.js

"nuxt": "^4.1.1",
"nuxt-headlessui": "^1.2.1",

[P4sca1]

Closing, as Nuxt 4 is supported as of version 1.2.1