Static site generation with Nuxt in Vue - Step-by-Step Execution

Concept Flow - Static site generation with Nuxt

Write Vue components and pages

↓

Configure Nuxt for static generation

↓

Run 'nuxt generate' command

↓

Nuxt builds app and pre-renders pages

↓

Static HTML, CSS, JS files created

↓

Deploy static files to web server or CDN

↓

User requests page -> static file served instantly

This flow shows how Nuxt takes your Vue app, pre-builds all pages into static files, and then serves them fast without a server.

Execution Sample

Vue

export default {
  target: 'static',
  generate: {
    routes: ['/', '/about', '/contact']
  }
}

This config tells Nuxt to generate a static site and pre-build the /about and /contact pages.

Execution Table

Step	Action	Input/Config	Process	Output
1	Start Nuxt generate	target: 'static'	Nuxt reads config	Ready to build static site
2	Scan pages folder	Pages: index.vue, about.vue, contact.vue	Identify routes	Routes: '/', '/about', '/contact'
3	Pre-render '/' page	index.vue	Render to HTML	index.html created
4	Pre-render '/about' page	about.vue	Render to HTML	about.html created
5	Pre-render '/contact' page	contact.vue	Render to HTML	contact.html created
6	Copy assets	CSS, JS, images	Prepare static files	Assets copied to dist folder
7	Finish generation	All pages rendered	Build complete	Static site ready in /dist
8	Deploy site	Upload /dist to server	Serve static files	Users get fast page loads

💡 All pages pre-rendered and static files generated for deployment

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
routes	[]	['/', '/about', '/contact']	['/', '/about', '/contact']	['/', '/about', '/contact']
generatedFiles	{}	{}	{index.html, about.html, contact.html}	{index.html, about.html, contact.html, assets}

Key Moments - 2 Insights

Why does Nuxt pre-render pages during 'generate' instead of rendering on user request?

Because static site generation builds all pages ahead of time (see steps 3-5 in execution_table), so users get fast static files without server rendering delays.

What happens if a page is missing from the routes list in the config?

Nuxt won't pre-render that page during generation (see step 2), so it won't have a static HTML file and may cause 404 errors when deployed.

Visual Quiz - 3 Questions

Look at the execution table, what files are created after step 5?

A No files yet

B Only index.html

C index.html, about.html, contact.html

D Assets like CSS and JS

💡 Hint

Check the 'Output' column at step 5 in the execution_table

At which step does Nuxt copy CSS, JS, and images to the static folder?

A Step 3

B Step 6

C Step 2

D Step 8

💡 Hint

Look for 'Copy assets' action in the execution_table

If you add a new page 'blog.vue' but don't update routes in config, what happens?

A blog page is not pre-rendered and missing in static files

B Nuxt pre-renders blog page automatically

C Nuxt throws an error and stops

D blog page is rendered on user request dynamically

💡 Hint

Refer to key_moments about missing routes and step 2 in execution_table

Concept Snapshot

Static Site Generation with Nuxt:
- Set target: 'static' in nuxt.config.js
- Use 'nuxt generate' to pre-build pages
- Nuxt renders each page to HTML ahead of time
- Static files served fast without server
- Configure routes to include all pages
- Deploy /dist folder to any static host

Full Transcript

Static site generation with Nuxt means building your Vue app pages into static HTML files before users visit. You write your Vue components and pages, then configure Nuxt to use the 'static' target. Running 'nuxt generate' scans your pages, pre-renders each one into HTML, and copies assets like CSS and JavaScript. The result is a folder full of static files ready to deploy anywhere. When users visit, they get fast page loads because the server just sends static files without running code. Make sure to include all your pages in the routes config so Nuxt pre-renders them. This process improves speed and reliability for your website.