First impressions after migrating to Nuxt 4

I recently launched a new application called writizzy. This app uses Nuxt 4 and Nuxt UI for the frontend. Meanwhile, I still have hakanai running on Nuxt 3.

While working on Nuxt 4, I really enjoyed using Nuxt UI and it shows in the writizzy result. So I decided to take on the little task of migrating hakanai to Nuxt 4 as well.

So, is it easy to migrate? Why do it? And what are the first impressions?

Nuxt 4

I'm assuming you already know Nuxt. Or maybe not? If not, it's THE frontend framework for doing SSR with Vue.js and it plays in the same league as Nextjs. It's my first choice for web development today.

For those who experienced the Nuxt 2 to Nuxt 3 migration, when we talk about migration, eyebrows often furrow because the experience was relatively disastrous. But this time with Nuxt 4, the migration is pretty smooth. And that's a good thing since that was the promise of the previous version: bringing better modularization for greater simplicity in evolution.

Actually, Nuxt 4 isn't really a revolution, but rather an evolution. I say that because even when re-reading the release notes, I don't see anything really remarkable about the switch to Nuxt 4.

Well, yes. It talks about performance. And overall, my first impression is mixed. Yes, it's probably more performant at runtime. But the dev experience has definitely degraded. But I'll come back to that later.

But let's get back to Nuxt 4. I was a bit hasty in saying there were no notable changes. Actually, the main novelty, the one that made me migrate, is Nuxt UI Pro going open source and the availability of Tailwind 4 that comes with it.

Nuxt UI / Nuxt UI Pro

Until now, I used a lot of flowbite or preline to add more advanced components. I mostly copy-pasted to get the markup and then added the whole JS layer to make it work. I also integrated DaisyUI for a few things like Select Menus or dropdowns. But in the end, it gave me a patchwork that wasn't always consistent on the frontend. Nuxt UI is a complete component library that easily replaces everything I just listed. This library was previously split in two with a free open source part, and a paid part, a boilerplate as some would say.

Using Nuxt UI on Writizzy, everything is much more consistent and using Tailwind themes helps maintain that consistency.

In short, that was the major criterion for me to switch to Nuxt 4 on Hakanai.

Migration and first impressions

The migration, as I said, is pretty simple if we just consider that the application needs to work. I had to change the directory structure but it remains fairly trivial. You need to change a few imports, which is easily done with "Search/Replace" across the entire codebase.

It gets a bit trickier with Tailwind usage since the way to include Tailwind differs between Nuxt 3/Nuxt tailwind and Nuxt 4 / Nuxt UI. But you figure it out pretty quickly. However, with this migration I broke the integration between Tailwind and DaisyUI. This is what cost me the most time because I had to go through all the places where I used DaisyUI-specific markup to replace it with its Nuxt UI equivalent. The first step cost me 1 to 2 hours max. The second took place over 2 or 3 mornings.

I have some apprehension, I haven't deployed this new version of Hakanai yet because I want to make sure I've tested everything properly and I don't want to leave it to users to do it for me. But it shouldn't be long now.

Now, let's move on to the slightly less pleasant point.

Yes, runtime performance seems pretty good. I can't really do a before/after on writizzy but without any effort I achieved a perfect score on lighthouse. (Did you know there are confetti when you hit 100 everywhere?)

However, in dev, it's a different story. There are many errors when launching applications.

The server reboots randomly because the nuxt.config.ts file was supposedly modified, which isn't the case. And sometimes, it just crashes and you have to restart everything.

As for startup time, it's significantly higher, much more than my Java/Kotlin backend. Now, I know that Nuxt plans to soon switch to a new version of vite.dev including rolldown, a JavaScript bundler written in Rust that should significantly improve all this. But in the meantime, the dev experience suffers quite a bit.

It remains acceptable and I won't go back, especially for the benefit of Nuxt UI. But it's also because I work alone. I'm not sure I would have made this kind of decision if I was still working in a larger team.

That's kind of the dark spot of this migration and I'm eagerly waiting for it to be resolved.