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.

Practice

1. What does static site generation (SSG) in Nuxt do before users visit the site?

easy

A. Requires a server to render pages on demand

B. Generates pages dynamically on each user request

C. Builds all pages ahead of time as static files

D. Only builds the homepage statically

Solution

1. Step 1: Understand static site generation concept

   Static site generation means creating all pages before users visit, so they are ready as static files.

2. Step 2: Apply to Nuxt behavior

   Nuxt with static target builds all pages ahead, not on demand or partially.

3. Final Answer:

   Builds all pages ahead of time as static files -> Option C

4. Quick Check:

   SSG = Pre-build pages [OK]

Hint: SSG means pre-building pages before user visits [OK]

Common Mistakes:

• Confusing static generation with server-side rendering
• Thinking pages build on each request
• Assuming only homepage is static

2. Which Nuxt configuration option enables static site generation?

easy

A. target: 'static'

B. mode: 'universal'

C. ssr: false

D. buildModules: ['@nuxt/static']

Solution

1. Step 1: Identify Nuxt config for static generation

   Nuxt uses target: 'static' to enable static site generation.

2. Step 2: Check other options

   ssr: false disables server-side rendering but does not enable static generation; mode is deprecated; buildModules with '@nuxt/static' is invalid.

3. Final Answer:

   target: 'static' -> Option A

4. Quick Check:

   Static target = 'static' [OK]

Hint: Look for target set to 'static' in config [OK]

Common Mistakes:

• Using ssr: false instead of target: 'static'
• Confusing mode with target
• Assuming buildModules enables static

3. Given this Nuxt config snippet, what will be the output folder after running nuxt generate?

export default {
  target: 'static',
  generate: {
    dir: 'public'
  }
}

medium

A. A folder named 'build' will be created

B. A folder named 'dist' will be created

C. No folder will be created automatically

D. A folder named 'public' will be created

Solution

1. Step 1: Understand generate.dir option

   The generate.dir option sets the output folder for static files.

2. Step 2: Apply config values

   Since dir: 'public' is set, the static files will be generated inside a folder named 'public'.

3. Final Answer:

   A folder named 'public' will be created -> Option D

4. Quick Check:

   generate.dir = output folder [OK]

Hint: generate.dir sets output folder name [OK]

Common Mistakes:

• Assuming default 'dist' folder is always used
• Confusing generate.dir with buildDir
• Thinking no folder is created

4. You run nuxt generate but your dynamic routes are missing from the static site. What is the likely cause?

medium

A. You forgot to add the dynamic routes in generate.routes

B. You set target to 'server' instead of 'static'

C. You did not install the Nitro preset

D. You used ssr: false in config

Solution

1. Step 1: Understand dynamic routes in static generation

   Nuxt needs explicit dynamic routes listed in generate.routes to pre-build them.

2. Step 2: Check other options

   target: 'server' disables static generation but does not explain missing dynamic routes if static is used; Nitro preset is internal; ssr: false disables SSR but not related to dynamic routes generation.

3. Final Answer:

   You forgot to add the dynamic routes in generate.routes -> Option A

4. Quick Check:

   Dynamic routes need generate.routes [OK]

Hint: Add dynamic routes in generate.routes to include them [OK]

Common Mistakes:

• Assuming dynamic routes are auto-detected
• Confusing ssr: false with static target
• Thinking Nitro preset fixes missing routes

5. You want to build a blog with Nuxt static generation. Your posts are fetched from an API at build time. Which approach correctly generates static pages for each post?

hard

A. Fetch posts only on client side with mounted() and rely on client rendering

B. Use asyncData to fetch posts and list them, then add dynamic routes in generate.routes to pre-build each post page

C. Set ssr: false and generate pages dynamically on server

D. Use fetch() in components without configuring generate.routes

Solution

1. Step 1: Fetch posts at build time

   Using asyncData fetches posts during build, enabling static generation.

2. Step 2: Configure dynamic routes for posts

   Adding post URLs in generate.routes tells Nuxt to pre-build each post page as static HTML.

3. Step 3: Evaluate other options

   Client-side fetching delays content and is not static; ssr: false disables server rendering; fetch() without generate.routes won't pre-build dynamic pages.

4. Final Answer:

   Use asyncData and generate.routes to pre-build each post page -> Option B

5. Quick Check:

   asyncData + generate.routes = static dynamic pages [OK]

Hint: Use asyncData and generate.routes for static dynamic pages [OK]

Common Mistakes:

• Fetching posts only on client side
• Not adding dynamic routes in generate.routes
• Disabling SSR with ssr: false