Our journey with Vue.js began with its initial version almost a decade ago when we decided to give it a chance. Since then, we've remained loyal to it. Along the way, Nuxt emerged as a game-changer, significantly simplifying our lives, especially in the e-commerce industry where SEO support is crucial.
Nuxt simplified the process of creating Vue.js applications by providing a higher level abstraction, conventions, a well-defined project structure, and most importantly, default Server Side Rendering. It allowed us to prioritise application logic over configuration, enabling a more streamlined development experience. Beyond these benefits, Nuxt 3 introduces new features that have proven incredibly useful in our tasks. In this article, I will highlight the most impactful changes and briefly describe their use.
Hybrid rendering
Most of the applications we've developed thus far have relied on Server Side Rendering. This choice is evident when crafting e-commerce applications and having to select a single rendering mode while taking care of SEO. Unfortunately, such applications come with certain limitations, often requiring additional optimization efforts on our part to enhance performance.
Fortunately, in the case of Nuxt 3, Hybrid Rendering comes to the rescue. It allows different caching rules per route and determines how the server should handle individual requests. Now we can easily mix rendering modes and decide which pages should be server-side rendered, which ones should be client-side rendered, and what caching strategy we want to use. All of this is possible through the main configuration file.
Layers
Another feature that saved us a lot of time and helped us avoid additional issues is the layer. We find it especially valuable when delivering themes, a popular requirement in the e-commerce industry. While we previously managed this by creating an additional script that performed similarly to the currently provided default feature, now we can achieve it effortlessly. Another good use case is the ability to share a set of components and tools across various projects. All of this is possible thanks to the layer feature and simple changes in the main configuration file.
Full TypeScript support
In the Nuxt 2, writing TypeScript wasn't very intuitive. It always caused more problems than it brought benefits, which is why we mostly used plain JavaScript in most of our applications.
We are delighted that Nuxt 3 comes with full, first-class support for TypeScript. Not everyone may like TypeScript, but for our team, it was a great opportunity to introduce TypeScript into our development stack and prevent many potential runtime errors. From now on, we can enhance our CI, and no one is able to deploy the application if typecheck fails.
API layer
As mentioned earlier, Nuxt 3 introduces Hybrid Rendering, which is made possible by a new server engine called Nitro. Along with this feature, Nuxt 3 provides many other features (a broad topic for another article). One of these features is the API layer, which allows us to create a full-stack application within our Nuxt codebase easily. We can effortlessly create different API endpoints based on the directory structure and file names. This functionality has shown itself to be exceptionally valuable, especially in situations where authentication with a third-party service is necessary, or when incorporating an API gateway is needed. It reduces the requirement for extensive involvement with backend developers, making the process streamlined and efficient.
Summary
The features presented above are just some of the ones we could feel most when moving from version 2 to 3 in our headless e-commerce applications. Nuxt 3 is truly a cutting-edge framework that comes with many improvements and an incredible developer experience. It also provides numerous modules created by the core team and the community, making our work even more enjoyable and efficient. Additionally, the roadmap and features that are already available in the experimental version look very promising. We are always happy when the new version of Nuxt is released!
