How to deploy and generate a static site on Nuxt 3?

Question

I'm creating website on Nuxt and I have created a new app on Nuxt 3. But I have a problem for the deployment, there is no 'normal' build for 'normal server' as Nuxt 2.x.

I'm using 'Lambda' preset. https://v3.nuxtjs.org/docs/deployment/presets/lambda

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  // Global page headers: https://go.nuxtjs.dev/config-head

  nitro: {
    preset: 'lambda'
  },

  head: {
    title: 'Title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
 
      
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/favicon.png' }
    ],
  script: [
    {  
      type: 'text/javascript', 
      src: '/mana.js',
  }
]
},
})

And on Nuxt 2.x I used this:

// nuxt.config.js

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static'
}

What configuration should I use on Nuxt 3 to have 'normal' export with an index.html file at the root for all server?

Sawfish

Answer 1

Static deployment is not currently available for Nuxt 3

Sawfish

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Manana

Concise but explicit answer ! At the time being the RFC is available here: github.com/nuxt/framework/discussions/560 – Ithaca

Answer 2

Please use generate script like yarn generate this will create the .output/public and output will depend on ssr: boolean property in nuxt.config.ts.

if ssr is true which is by default, then there will be individual html for each dynamic route and that means dynamic routes are rendered at build time and whenever there is change in data or number of dynamic routes then you will need to run this command again.

if ssr is false then rendering will be done at client side, like SPA app and dynamic routes will have only one file that will do client side rendering and data will be fetched at client side that way site will show latest data.

Check static-hosting

Matrilineal

Answer 3

Run the command:

nuxi generate

Dicast

Answer 4

I managed to deploy my nuxt3 project static to gh-pages. I had to overcome two obstacles.

1. yarn generate did not generate static routes until I explicitly forced it by setting

   generate: {routes: ['/','all','my','other','routes']} .... 
   
   

in nuxt.config.js as target:"static" did not work for me.

2. gh-pages need an empty .nojekyll file which seems currently not being generated by nuxt generate nor gh-pages. I entered the following into my package.json:

   "deploy": "touch .output/.nojekyll && gh-pages --dotfiles -d .output"
   
   

This seems ugly but works for me.

Antihero

Answer 5

Besides adding target: 'static' in your nuxt.config.ts

export default defineNuxtConfig({
    target: 'static' // default is 'server'
})

You also need to update your build script to be nuxi generate in your package.json (which was nuxi build originally)

{
  "scripts": {
    "build": "nuxi generate"
  }
}

References: https://v3.nuxtjs.org/bridge/overview#static-target

Nonego

becareful what you mention is about migration from nuxt2 to nuxt3 there is not only those things to do,so... – Mathers

This is the nuxt 2 answer, but the question is regarding nuxt 3 – Demur