Introduction

Overview

Technology never stands still. This also applies to the continued development of Storefront. In the past month, the team of Storefront has taken the time to introduce a significant update regarding our frontend development framework - the transition of our tech stack from Nuxt.js 2 to Nuxt 3.

What is Nuxt 3?

Nuxt 3 is a powerful and versatile full-stack web framework that allows the creation of amazing web applications with Vue. It is fast, flexible, modern, and easy to use. Whether building a simple website, a complex web app, or anything in between, Nuxt 3 can help achieve the desired goals.

Why Nuxt 3?

• End of Life: Vue 2 / Nuxt 2 reached their EOL at the end of 2023
• Knowledge: Continue working with Vue / Nuxt ecosystem, as it will be easier for all the developers to adapt
• Time to Market: Vue has an elegant learning curve for new developers and enables developers to pick up a project quickly
• New Architecture: Nuxt 3 represents not just a new iteration of the Nuxt framework, but takes the combined experiences and feedback collected from years of Nuxt.js 2 to unify everything into a newly redeveloped meta framework from the ground up
• TypeScript: Nuxt 3 is built from the ground up using TypeScript, resulting in improved developer experience and reduced overhead due to complications
• Performance: New underlying technologies and architecture allow for improvements in overall application response times and performance
• Customizability: Versatile possibilities to configure, tweak, and adapt the application to desired needs
• Extensibility: Nuxt 3 continues the path of a modular architecture and fosters a large-scale open-source ecosystem of modules and plugins to extend the default Nuxt 3 feature sets

Benefits of upgrading

• Newly built web engine (nitro) and server (h3) of Nuxt 3 reduce response times, resulting in higher performance of the entire application, including improved SEO performance and a better User Experience.
• Vue 3 allows building truly reusable components and helpers (Composition API) that considerably speed up the time to market.
• Nuxt 3 is completely rewritten in TypeScript and includes a large variety of developer tooling which offers faster coding, fewer bugs, and increased developer experience
• The modular architecture of Nuxt 3 provides a large variety of 3rd party integrations and extensions to further customize the application experience
• The active community and developer ecosystem around Nuxt 3 provide an extensive knowledge base

Technical Features

• Fast development experience with Vite, makes the development server start and reload instantly and allows for greatly reduced production build times by integrating rollup and esbuild.
• Integrates Vue 3, the latest version of Vue, which offers many enhancements and innovations such as the Composition API, Teleport, Suspense, and Fragments.
• Nitro, the new rendering engine, supports multiple different rendering modes for all requirements. Server-side rendering (SSR), static site generation (SSG), client-side rendering (CSR), and many more.
• Native TypeScript integration adds static type checking and other features to JavaScript, reducing the frequency of potential bugs and offering faster development times

Architectural changes

• New Vue: Nuxt 3 is built on top of Vue 3
• New build toolchain: Instead of Webpack 4, the default bundler is Vite (Webpack 5 is also supported)
• New HTTP framework: Instead of express, middlewares and endpoints use h3
• New session library: @scayle/h3-session instead of express-session
• Standalone build: No node_modules are included in the deployed application
• Runtime env: Runtime environment variables must be defined in runtimeConfig and follow the NUXT_ format. All other env variables will be evaluated at compile time
• Config limitations: The configuration must be serializable, and functions can no longer be passed as module options
• No Vuex support: There’s a built-in useState composable, or you can manually install vuex or pinia
• Redevelopment: Nuxt 3 is not a continuation of Nuxt.js 2, but a full redevelopment with different underlying technologies and architecture

Abbreviations

• SFC = Storefront
• SFB = Storefront Application
• TBA = Token-based Authentication

Terminology

To simplify this guide and future documentation, we will establish the following streamlined terminology.