In this tutorial, you learn to deploy aNuxt 3 application toAzure Static Web Apps. Nuxt 3 supportsuniversal (client-side and server-side) rendering, including server and API routes. Without extra configuration, you can deploy Nuxt 3 apps with universal rendering to Azure Static Web Apps. When the app is built in the Static Web Apps GitHub Action or Azure Pipelines task, Nuxt 3 automatically converts it into static assets and an Azure Functions app that are compatible with Azure Static Web Apps.

Prerequisites

• An Azure account with an active subscription.Create an account for free.
• A GitHub account.Create an account for free.
• Node.js 16 or later installed.

Set up a Nuxt 3 app

You can set up a new Nuxt project usingnpx nuxi init nuxt-app. Instead of using a new project, this tutorial uses an existing repository set up to demonstrate how to deploy a Nuxt 3 site with universal rendering on Azure Static Web Apps.

1. Navigate tohttp://github.com/staticwebdev/nuxt-3-starter/generate.

2. Name the repositorynuxt-3-starter.

3. Next, clone the new repo to your machine. Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your account name.

   git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter

4. Navigate to the newly cloned Nuxt.js app:

   cd nuxt-3-starter

5. Install dependencies:

   npm install

6. Start Nuxt.js app in development:

   npm run dev -- -o

Navigate tohttp://localhost:3000 to open the app, where you should see the following website open in your preferred browser. Select the buttons to invoke server and API routes.

Deploy your Nuxt 3 site

The following steps show how to create an Azure Static Web Apps resource and configure it to deploy your app from GitHub.

Create an Azure Static Web Apps resource

1. Navigate to theAzure portal.

2. SelectCreate a Resource.

3. Search forStatic Web Apps.

4. SelectStatic Web Apps.

5. SelectCreate.

6. On theBasics tab, enter the following values.

   Property	Value
   Subscription	Your Azure subscription name.
   Resource group	my-nuxtjs-group
   Name	my-nuxt3-app
   Plan type	Free
   Region for Azure Functions API and staging environments	Select a region closest to you.
   Source	GitHub

7. SelectSign in with GitHub and authenticate with GitHub.

8. Enter the following GitHub values.

   Property	Value
   Organization	Select your desired GitHub organization.
   Repository	Select the repository you created earlier.
   Branch	Selectmain.

9. In theBuild Details section, selectCustom from theBuild Presets drop-down and keep the default values.

10. In theApp location, enter/ in the box.

11. In theApi location, enter.output/server in the box.

12. In theOutput location, enter.output/public in the box.

Review and create

1. SelectReview + Create to verify the details are all correct.

2. SelectCreate to start the creation of the static web app and provision a GitHub Actions for deployment.

3. Once the deployment completes, selectGo to resource.

4. On theOverview window, select theURL link to open your deployed application.

If the website does not immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then refresh the browser to view your web app.

You can check the status of the Actions workflows by navigating to the Actions for your repository:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Synchronize changes

When you created the app, Azure Static Web Apps created a GitHub Actions workflow file in your repository. Return to the terminal and run the following command to pull the commit containing the new file.

git pull

Make changes to the app by updating the code and pushing it to GitHub. GitHub Actions automatically builds and deploys the app.

For more information, see the Azure Static Web Apps Nuxt 3 deployment presetdocumentation.