Universal rendering with Nuxt 3 and Azure Static Web Apps
Published Oct 03 2022 09:00 AM 6,073 Views

Azure Static Web Apps automatically builds and deploys dozens of frontend frameworks, one of them is Nuxt. Today, we're excited to share that you can deploy Nuxt 3 applications with universal rendering to Azure Static Web Apps.


While Nuxt 2 is known for its ease of use, Nuxt 3 brings even faster performance and improved developer experience with a thrilling new set of underlying technologies and features. With the release of Nuxt 3’s release candidate in April 2022, developers witnessed a complete re-architect of the framework. Nuxt 2 apps that have been upgraded with Nuxt Bridge also work with Azure Static Web Apps.


What’s new in Nuxt 3? 


  • Zero-configuration deployment of Nuxt 3 and Nuxt Bridge applications with universal rendering to Azure Static Web Apps 
  • API routes support for automatic generation from server API and middleware directories 
  • Vue 3 support including composition API with imported functions for better code re-usability 
  • Nitro Engine, a full stack server that allows deployment of output on Node.js, serverless, edge-side rendering, or as static 
  • Vite, a frontend tooling that features fast Hot Module Replacement (HMR) and optimizes assets for production 

Universal rendering vs static rendering


Previously, you were able to deploy a static rendered Nuxt app on Azure Static Web Apps, where the entire app is pre-generated as static content. However, Nuxt 3 also supports universal rendering, which provides the performance and search engine optimization of server-side rendering while still enabling client-side interactivity.


With Nuxt 3's support for Azure Static Web Apps, you can now deploy sites with universal rendering. 


To learn more, check out the Nuxt 3 site deployment with universal rendering on Azure Static Web Apps documentation that also includes a tutorial.


Nuxt 3 Sample App on Azure Static Web AppsNuxt 3 Sample App on Azure Static Web Apps


Nuzhat Minhaz is a Program Manager Intern on the Azure Static Web App team at Microsoft. (Twitter: @nuzhatminhaz

Version history
Last update:
‎Sep 29 2022 02:14 PM
Updated by: