Static site generation with Nuxt in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Nuxt static page component?

Consider this Nuxt 3 page component using definePageMeta and asyncData. What will the user see when visiting this page?

Vue

import { h } from 'vue';

export default {
  async asyncData() {
    return { message: 'Hello from static site!' }
  },
  setup(props, context) {
    return () => {
      return h('div', context.attrs.message)
    }
  },
  definePageMeta() {
    return { ssr: true }
  }
}

A <div>undefined</div>

B Runtime error: context.attrs.message is undefined

C <div></div>

D <div>Hello from static site!</div>

💡 Hint

Remember how asyncData properties are accessed in the template or render function.

The asyncData returns data merged into the component's data context, but context.attrs contains HTML attributes, not data properties. Accessing context.attrs.message is undefined, causing a runtime error.

📝 Syntax

intermediate

Which option correctly configures Nuxt 3 for static site generation?

In nuxt.config.ts, which configuration enables static site generation with full pre-rendering?

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

B export default defineNuxtConfig({ target: 'static' })

C export default defineNuxtConfig({ ssr: false })

D export default defineNuxtConfig({ ssr: true, target: 'server' })

💡 Hint

Nuxt 3 uses Nitro presets to define static generation.

In Nuxt 3, static site generation is enabled by setting ssr: true and configuring Nitro with preset: 'static'. The target option is deprecated in Nuxt 3.

❓ state_output

advanced

What is the value of posts after running this Nuxt 3 static page code?

This page fetches posts during build time using useAsyncData. What will posts.value contain when the page is rendered?

Vue

const { data: posts } = await useAsyncData('posts', () => fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json()))

return { posts }

A Undefined because useAsyncData cannot be used in static generation

B An empty array because fetch is not awaited properly

C A Promise object instead of data

D An array of 100 post objects fetched from the API

💡 Hint

Remember that useAsyncData resolves data during build in static generation.

useAsyncData fetches data asynchronously and returns a reactive object with the resolved data in data.value. In static generation, this data is fetched at build time, so posts.value contains the array of posts.

🔧 Debug

advanced

Why does this Nuxt 3 static page fail to generate with an error?

Given this page code, why does the static generation fail with ReferenceError: window is not defined?

Vue

export default {
  mounted() {
    console.log(window.location.href)
  },
  asyncData() {
    return { title: 'Static Page' }
  }
}

A Because <code>window</code> is undefined in server environment and code runs during static generation

B Because <code>asyncData</code> runs on server and tries to access <code>window</code>

C Because <code>mounted</code> runs only on client, so no error should occur

D Because static generation runs server-side and <code>mounted</code> code is executed during build

💡 Hint

Think about when and where window is available in Nuxt static generation.

During static generation, code runs in a Node.js environment where window does not exist. If code accessing window runs during build (e.g., in lifecycle hooks or setup), it causes a ReferenceError.

🧠 Conceptual

expert

Which statement best describes Nuxt 3 static site generation behavior?

Choose the most accurate description of how Nuxt 3 handles static site generation (SSG) with dynamic routes.

A Nuxt 3 requires server middleware to render dynamic routes during static generation

B Nuxt 3 cannot pre-render dynamic routes and falls back to client-side rendering for them

C Nuxt 3 pre-renders all pages including dynamic routes if <code>generate.routes</code> is configured with all paths

D Nuxt 3 pre-renders only static routes and ignores dynamic routes during static generation

💡 Hint

Think about how Nuxt 3 uses route generation to pre-render dynamic pages.

Nuxt 3 static generation can pre-render dynamic routes if you provide all possible paths in the configuration (e.g., generate.routes or use prerender options). This allows full static output including dynamic pages.

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