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!

Vue adopted a Single File Component philosophy, which has some benefits over splitting concerns, which you can read up on in the official Vue Docs. From a SFC philosophy, you’d want everything that relates to your component in a Single File. So let’s explore this take with our component tests as well, because why would your tests be any different than your scripts, template or styles?

We’re going to leverage a feature that Vitest offers, out of the box, to a Vue example code base. Bear in mind that this approach would be applicable to other implementations that leverage Vitest just as easy. Also, this is a thought experiment.

Astro is the new cool kid in town, promising super fast websites with minimum page load. That sounds interesting and Astro has some out of the box improvements that look really promising. So let's discover what the Buzz (all astro related puns are intended) is all about! 👨🏻‍🚀

Astro is a modern, fast, and lightweight meta framework for building web applications. It is built on top of popular web technologies like React, Vue, and Svelte, and provides a simple, intuitive way to build high-performance web applications.