TL;DR: I upgraded a 32k LOC Nuxt app from v3 to v4 in 29 minutes of actual work. Here's how it went and what I learned.

I'm maintaining a reasonably sized Nuxt application - not massive, but substantial enough to make upgrade decisions matter. We're talking about a project (excluded tests here) with 32k lines of code spread across 173 files, with a healthy mix of 72 Vue components and 44 TypeScript files. The dependency footprint includes 34 production dependencies plus 7 development ones. So, not that big, which makes it a perfect candidate for an upgrade scenario!

This article is inspired by the BBC produces series on nature, with a particular episode dealing with the wildebeest migration. The series was presented by Sir David Attenborough, and I will try and channel his spirit in this article. I have fond memories of these sort of documentaries, watching them together with my father. Those were simpler times.

I’ve used this theme and contents in talks that I gave with a similar title. Note this article details the approach that works best for us at Jumbo Supermarkten. It might not be the best in your situation, so treat its contents as inspirational.

With some nicely formatted content, the blog becomes readable, so let's improve the internal linking system by investigating the Tags in relation to Articles. This will allow users to navigate and group articles based on a common tag.

Requirement for this step is to have multiple articles added, where some have a common tag.

What makes a website a blog? Articles of course! In the last step we already did a lot of legwork to grab contents and show it on the page, so this is just a repetition of what we already were doing, should be straight forward then!

So far we have two unconnected systems. So in this post, we're going to connect them to read from the Pages, Articles and Tags. We're first just going to add all of the utilities and helpers that we'll need. We're going to create a Nuxt plugin and some composables.