Friday, June 20, 2025Deploy Nuxt 3 static site with Nginx

Keven Client A. Cataluña @LinkedIn

Tags

Nuxt Nginx

Previous postHow to install Nginx

Next postDeploy Ionic + Vue application with Nginx

← Back to the posts

Introduction

This guide explains how to deploy a Nuxt 3 static site with Nginx, starting with turning off the server-side rendering and generating the static files, configuring Nginx to serve the build output, and verifying the deployment on the server.

Steps1. Clone the Nuxt project into the web root directory

/var/www/html

    git clone git@github_development:kevenclient/get-go.git

2. Disable the server-side rendering (SSR)

nuxt.config.ts

    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ...
  ssr: false,
})

3. Generate the static files

/var/www/html/get-go

    npm run generate

4. Verify that the dist folder has been created

/var/www/html/get-go

    ls -la

      total 548
  drwxr-xr-x  17 root root   4096 Jul 11 11:35 .
  drwxr-xr-x   4 root root   4096 Jul 11 13:01 ..
  drwxr-xr-x   8 root root   4096 Jul 11 11:34 .git
  -rw-r--r--   1 root root    193 Jul 11 11:33 .gitignore
  drwxr-xr-x   7 root root   4096 Jul 11 11:35 .nuxt
  drwxr-xr-x   3 root root   4096 Jul 11 11:35 .output
  -rw-r--r--   1 root root    842 Jul 11 11:33 README.md
  drwxr-xr-x   4 root root   4096 Jul 11 11:33 assets
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 components
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 composables
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 data
  lrwxrwxrwx   1 root root     35 Jul 11 11:35 dist -> /var/www/html/get-go/.output/public
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 enums
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 interfaces
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 layouts
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 middleware
  drwxr-xr-x 570 root root  20480 Jul 11 11:34 node_modules
  -rw-r--r--   1 root root    383 Jul 11 11:33 nuxt.config.ts
  -rw-r--r--   1 root root 448627 Jul 11 11:34 package-lock.json
  -rw-r--r--   1 root root    477 Jul 11 11:33 package.json
  drwxr-xr-x   5 root root   4096 Jul 11 11:33 pages
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 public
  drwxr-xr-x   2 root root   4096 Jul 11 11:33 server
  -rw-r--r--   1 root root    281 Jul 11 11:33 tailwind.config.js
  -rw-r--r--   1 root root     94 Jul 11 11:33 tsconfig.json

5. Update the default Nginx site configuration

/etc/nginx/sites-available/default

    # Default server configuration
server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /var/www/html/get-go/dist;

  # Add index.php to the list if you are using PHP
  index index.html index.htm index.nginx-debian.html;

  server_name _;

  location / {
    try_files $uri $uri/ /index.php?$query_string /index.html;
  }
}

6. Test the Nginx configuration

    sudo nginx -t

      nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
  nginx: configuration file /etc/nginx/nginx.conf test is successful

7. Reload Nginx to apply the changes

    sudo systemctl reload nginx

8. Verify the deployment by navigating to https://get-go.dev and you should see the Nuxt 3 project

Keven Client A. Cataluña @LinkedIn