Upgrading to Nuxt 3

By Matthew Hinton, Senior Developer

We recently released new versions of Outdoor Illinois Journal and Hunt Illinois, with major upgrades to Nuxt 3.  We’ve been happy with the Nuxt platform, and Nuxt 3 offers many advantages. We plan to update all of our Nuxt websites to 3.

Nuxt 2 End of Life

After April or June of 2024, Nuxt 2 will no longer get bug fixes or security. New versions and security patches will only be available with Nuxt 3.

Faster Page Renderings

The framework was redesigned from the ground up. The underlying JavaScript library Vue had a major version upgrade as well. Nuxt 2 ran with Vue 2, and now Nuxt 3 three runs with Vue 3.

Nuxt 3 has a completely new server-side piece called Nitro that runs the page generation and outputs the HTML that gets sent to the browser. That along with the new version of Vue makes the server side generation work much better and faster. We are getting much faster page loads on the Nuxt 3 platform.

GraphQL performance is greatly improved with the new Nuxt 3 module. Most of our Nuxt sites use GraphQL to integrate with a headless WordPress CMS. In Outdoor Illinois Journal, some pages load 10x faster with Nuxt 3.

Developer Experience

Nuxt 3 is an in-depth rewrite of the framework from Nuxt 2. The new version enables better, clearer programming patterns. The changes in Nuxt 3 from a developer standpoint are great. We can build and deploy pretty much anywhere with Nuxt 3. It supports hosting platforms like Netlify, Vercell, and Amazon Web Services.

Our usual deployment target is an AWS T3 instance. With Nuxt 2 we would have to check out and build the application on the server. Nuxt 3 doesn’t require that—we can build the application from our developer machine and basically just copy it to the server, then restart Node application server. That’s a super fast way to do it because any developer machine is much faster than a T3 server. The build step is much faster locally and then it’s just a matter of copying files and restarting.

Updating Hunt Illinois

I began by creating a new Nuxt application, then started importing and converting the Nuxt 2 application. I started with the top level page layouts, and then worked through navigation and menus. Once I had the shell of the site working, then I started the custom applications such as the Hunt Planner and the License Finder. Those have server side API calls which used Express in Nuxt 2. Nuxt 3 includes an Express compatible server that is part of the framework, so for each individual API route I made the small changes required to run in the Nuxt API server.

The main client benefits are the much faster page generation. Then there’s a whole bunch of developer experience upgrades. The way we’re able to write components, and the developer experience niceties that the new version provides, are great to work with. The new Nitro server and Vite build system are amazingly fast and save developer time. The upgrade puts us in a good place for further development of these important and long-lived web properties.

Glitches

The Nuxt module for the GraphQL library changed a lot, and that required more work to convert to the Vue 3 composition API. In Vue 2 there was one way to write user interface components. In Vue 3, they added a second variety of composition API. Library authors all seem to have jumped to the composition API, and in some cases they don’t make the options API available. That was a bit of a pain, but it was worth every bit. With the Nuxt 2 GraphQL module, we were seeing slow load times, especially on the Outdoor Illinois Journal site. The new Nuxt 3 module loads our GraphQL queries lightning fast.

Next Steps

We have added an entire internationalization layer to Hunt Illinois, which will become available to site visitors when the translations are ready in Spanish and Polish. There are many interesting aspects to internationalizing a Nuxt application with WordPress content, which will make a good future blog post.