Static site generation with Nuxt in Vue

Introduction

Static site generation creates web pages ahead of time. This makes websites load faster and work well without a server.

You want a fast website that loads instantly for visitors.

Your content does not change often, like blogs or portfolios.

You want better SEO because pages are ready for search engines.

You want to host your site easily on services like Netlify or GitHub Pages.

Syntax

Vue

export default defineNuxtConfig({
  ssr: true,
  nitro: {
    preset: 'static'
  }
})

Set nitro: { preset: 'static' } to enable static site generation in Nuxt 3.

Use nitro.preset = 'static' for Nuxt 3 to generate static files.

Examples

Basic config to tell Nuxt to build a static site.

Vue

export default defineNuxtConfig({
  nitro: {
    preset: 'static'
  }
})

Full config for Nuxt 3 to generate static HTML pages with server-side rendering enabled.

Vue

export default defineNuxtConfig({
  ssr: true,
  nitro: {
    preset: 'static'
  }
})

Sample Program

This simple Nuxt 3 component shows a static page. The config tells Nuxt to build static HTML files during build time.

Vue

<template>
  <main>
    <h1>Welcome to My Static Nuxt Site</h1>
    <p>This page is pre-built and loads very fast.</p>
  </main>
</template>

<script setup>
// No special code needed for static generation here
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  nitro: {
    preset: 'static'
  }
})

Important Notes

Static sites do not need a running server to show pages.

Dynamic data can be fetched at build time using useAsyncData or useFetch.

Remember to rebuild your site when content changes to update static pages.

Summary

Static site generation builds pages before users visit.

Nuxt uses nitro.preset: 'static' for this.

Static sites are fast, SEO-friendly, and easy to host.