Deploy Nuxt 3 sites with universal rendering on Azure Static Web Apps

Article
01/24/2023

In this tutorial, you learn to deploy a Nuxt 3 application to Azure Static Web Apps. Nuxt 3 supports universal (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 using npx 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.

Create a new repository under your GitHub account from a template repository.
Go to http://github.com/staticwebdev/nuxt-3-starter/generate
Name the repository nuxt-3-starter.
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
```
Go to the newly cloned Nuxt.js app:
```
cd nuxt-3-starter
```
Install dependencies:
```
npm install
```
Start Nuxt.js app in development:
```
npm run dev -- -o
```

Go to http://localhost:3000 to open the app, where you should see the following website open in your preferred browser:

Start Nuxt.js app

When you select a framework/library, you should see a details page about the selected item:

Details page

Generate a static website from Nuxt.js build

When you build a Nuxt.js site using npm run build, the app is built as a traditional web app, not a static site. To generate a static site, use the following application configuration.

Update the package.json's build script to only generate a static site using the nuxt generate command:
```
"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt generate"
},
```
Now with this command in place, Static Web Apps runs the build script every time you push a commit.
Generate a static site:
```
npm run build
```
Nuxt.js generates the static site and copy it into a dist folder at the root of your working directory.

Note

This folder is listed in the .gitignore file because it should be generated by CI/CD when you deploy.

Deploy your static website

The following steps show how to link the app you just pushed to GitHub to Azure Static Web Apps. Once in Azure, you can deploy the application to a production environment.

Create an Azure Static Web Apps resource

Go to the Azure portal.
Select Create a Resource.
Search for Static Web Apps.
Select Static Web Apps.
Select Create.

On the Basics 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

Select Sign in with GitHub and authenticate with GitHub.
Enter the following GitHub values.

Property Value

Organization Select your desired GitHub organization.

Repository Select the repository you created earlier.

Branch Select main.
In the Build Details section, select Custom from the Build Presets drop-down and keep the default values.
In the App location, enter / in the box.
In the Api location, enter .output/server in the box.
In the Output location, enter .output/public in the box.

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

Review and create

Select Review + Create to verify the details are all correct.
Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.
Once the deployment completes, select Go to resource.
On the Overview window, select the URL link to open your deployed application.

If the website does note immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then select 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 git pull origin main to pull the commit containing the new file.

Configure dynamic routes

Go to the newly-deployed site and select one of the framework or library logos. Instead of getting a details page, you get a 404 error page.

404 on dynamic routes

The reason for this is, Nuxt.js generated the static site, it only did so for the home page. Nuxt.js can generate equivalent static .html files for every .vue pages file, but there's an exception.

If the page is a dynamic page, for example _id.vue, it won't have enough information to generate a static HTML from such dynamic page. You'll have to explicitly provide the possible paths for the dynamic routes.

Generate static pages from dynamic routes

Update the nuxt.config.js file so that Nuxt.js uses a list of all available data to generate static pages for each framework/library:

  import { projects } from "./utils/projectsData";

  export default {
    mode: "universal",

    //...truncated

    generate: {
      async routes() {
        const paths = [];

        projects.forEach(project => {
          paths.push(`/project/${project.slug}`);
        });

        return paths;
      }
    }
  };

Note

routes is an async function, so you can make a request to an API in this function and use the returned list to generate the paths.

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 preset documentation.

Set up a custom domain