Nuxt3 Migration

Overview

Technology never stands still. This also applies to the continued development of Storefront Core. In the past month, the team of Storefront Core 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 Core
• SFB = Storefront Boilerplate
• TBA = Token-based Authentication

Terminology

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