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.