Static site generation with Nuxt in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable static site generation in Nuxt.

Vue

export default {
  target: '[1]'
}

Drag options to blanks, or click blank then click option'

Auniversal

Bstatic

Cserver

Ddynamic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'server' instead of 'static' disables static generation.

Confusing 'universal' with static target.

Setting target to static tells Nuxt to generate a fully static site.

2fill in blank

medium

Complete the code to define a static route for pre-rendering in Nuxt.

Vue

export default {
  generate: {
    routes: [1]
  }
}

Drag options to blanks, or click blank then click option'

A['/about', '/contact']

B'/about, /contact'

C{'/about', '/contact'}

D['about', 'contact']

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an array.

Omitting the leading slash in route paths.

The routes property expects an array of strings with leading slashes for paths.

3fill in blank

hard

Fix the error in the Nuxt config to correctly generate static pages.

Vue

export default {
  target: 'static',
  generate: {
    fallback: [1]
  }
}

Drag options to blanks, or click blank then click option'

Afalse

Bnull

Ctrue

D'404.html'

Attempts:

3 left

💡 Hint

Common Mistakes

Using boolean values instead of a filename string.

Setting fallback to null disables fallback page.

The fallback option should be a string naming the fallback HTML file for unknown routes.

4fill in blank

hard

Fill both blanks to create a dynamic route for static generation with params.

Vue

export default {
  generate: {
    routes() {
      return ['1', '2', '3'].map(id => `/user/[1]`)
    },
    fallback: [2]
  }
}

Drag options to blanks, or click blank then click option'

A${id}

Bfalse

C'404.html'

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' without ${} inside template strings.

Setting fallback to a string instead of boolean.

Use template literals with ${id} to insert the id in the route string. Setting fallback to false disables fallback pages.

5fill in blank

hard

Fill all three blanks to generate a static site with custom routes and fallback.

Vue

export default {
  target: '[1]',
  generate: {
    routes: ['home', 'blog', 'contact'].map(page => `/$[2]`),
    fallback: [3]
  }
}

Drag options to blanks, or click blank then click option'

Astatic

Bpage

C'404.html'

Dpages

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable name inside template string.

Setting fallback to boolean instead of filename string.

Set target to 'static' for static generation. Use the variable 'page' inside the template string to build routes. Set fallback to '404.html' for unknown routes.