Upgrading to nuxt 3

Introduction

Oh boy. It's been a long time since the last time I published a blog post. So long that I had to do a whole migration to a new major version of Nuxt. Nuxt 3 is out for quite some time now and after working with the composition API for the past few years I really wanted to make the switch.

Couple of things before we get started. This is not a guide, but rather my journey and the problems I stumbled upon when migrating. If you are interested in a "how to" guide feel free to let me know and I'll do my best in creating one.

The process

I rubbed my hands and got to work. I had two options.

• The first option was to start from scratch and re-build the whole thing. Honestly the codebase is not that big. I've got around 10 components such as the <AppHeader />, <AppFooter />, <BlogList /> etc. I could easily rebuilt the whole thing in a day and just replace the repo.

• The second option was to migrate to Nuxt 3, slowly and carefully migrating to the new version. This approach, I figured, will also help me better understand the framework and how to use it.

I went with option number two. You see I had a plan. The good folks over at Nuxt got me covered. I used their guide to help me migrate from Nuxt 2. Ben Hong also did a live coding session upgrading his website.

I was actually watching this live, so you understand how long it took me to finally pull the trigger

While I was doing the update I thought I could also update couple of other things in my repo such as switching to pnpm instead of yarn although I am considering switching to bun just for fun (sorry, pun intended).

The whole process was smooth well kind of. After updating the nuxt.config.ts I started slowly upgrading the rest of the repo started from the top of the directory. I spare you the details but I'll try to list couple of things that I believe are worth mentioning.

Eslint

The very first thing I had to do was to remove babel and every other dependency that Nuxt 2 was using and wasn't really needed in the new version. I also removed eslint and that brings me to the first "issue". I am using prettier and eslint as my formatting and linting tools. It took me some time to get the desired results and after installing some packages I got it working. The Nuxt team recommends against using Prettier when working with the codebase but I like Prettier. Anthony Fu has an opinionated eslint-config but that didn't really work for me so I had to spend some time to make it work for me.

Nuxt content

I also use Nuxt Content for my blog and this was another migration I had to do. To be fair I prefer the new way of fetching your content using the composables better!

The gotcha here was really specific and it was related to dates. You see in my old nuxt blog I was using nuxt-content-git to add an updatedAt date on my markdown files. I had to move away from that though as it wasn't reliable enough for me. The nuxt content module also dropped support for createdAt so the solution I found for that was creating custom date Front-matter parameters. Yeah I have to update them manually but I can live with that for now.

As I was writing that I thought that I might be able to get away with it and use Obsidian to automatically enter the date whenever I make an edit on my markdown files. Nice!

Modules migration

I am also using couple of other modules on my site, such as @nuxt/image and @nuxt-svgo that I had to update and make sure that they work as intended. Apple almost made me cry when they announced dropping support for PWAs but they reversed it. In the meantime I already removed the PWA module that I have to eventually re add at some point!

Netlify

I am deploying my website directly in Netlify and since Nuxt 3 is now powered by nitro I had to make a small change on the deployment settings in Netlify. Not a biggie but I had some down time because of that 😅

Conclusion

Well that's pretty much it. I might update the article in the feature as I try to expand and update my website but overall it was an interesting experience that definitely feels like an upgrade! I really like the DX that Nuxt provides and I hope that this will inspire me to write blog posts like this more often.

Until the next time...