Static site generation with Nuxt in Vue - Mini Project: Build & Apply

Static Site Generation with Nuxt

📖 Scenario: You are building a simple static website for a local bakery. The site will show a list of bakery items with their names and prices. You want to use Nuxt's static site generation feature to pre-render the pages for fast loading and SEO benefits.

🎯 Goal: Create a Nuxt app that statically generates a page listing bakery items with their names and prices.

📋 What You'll Learn

Create a data array of bakery items with exact names and prices

Add a configuration variable for currency symbol

Use Nuxt's asyncData to load the bakery items

Render the list of bakery items with their prices and currency symbol in the template

💡 Why This Matters

🌍 Real World

Static site generation is used to create fast, SEO-friendly websites that do not require a server to render pages on each request. This is common for blogs, portfolios, and small business sites like bakeries.

💼 Career

Understanding static site generation with Nuxt is valuable for frontend developers working with Vue.js frameworks, enabling them to build performant and accessible websites.

1

Create bakery items data array

Create a constant array called bakeryItems with these exact objects: { name: 'Croissant', price: 2.5 }, { name: 'Baguette', price: 3.0 }, and { name: 'Eclair', price: 4.0 }.

Vue

# Create the bakeryItems array with the specified objects
# Your code here

Hint

Use const bakeryItems = [ ... ] with objects inside the array.

2

Add currency symbol configuration

Add a constant called currencySymbol and set it to the string '€'.

Vue

const bakeryItems = [
  { name: 'Croissant', price: 2.5 },
  { name: 'Baguette', price: 3.0 },
  { name: 'Eclair', price: 4.0 }
]

# Add the currencySymbol constant below
# Your code here

Hint

Use const currencySymbol = '€' to set the currency symbol.

3

Use asyncData to load bakery items

Inside the default export of your Nuxt page component, add an asyncData method that returns an object with items set to the bakeryItems array.

Vue

const bakeryItems = [
  { name: 'Croissant', price: 2.5 },
  { name: 'Baguette', price: 3.0 },
  { name: 'Eclair', price: 4.0 }
]

const currencySymbol = '€'

export default {
  // Add asyncData method here
  // Your code here
}

Hint

Define async asyncData() that returns { items: bakeryItems }.

4

Render bakery items list with prices

In the template section of your Nuxt page, add a <ul> that uses v-for to loop over items. For each item, display the name and the price prefixed by currencySymbol. Use :key with item.name for list rendering.

Vue

  
  



const bakeryItems = [
  { name: 'Croissant', price: 2.5 },
  { name: 'Baguette', price: 3.0 },
  { name: 'Eclair', price: 4.0 }
]

const currencySymbol = '€'

export default {
  async asyncData() {
    return { items: bakeryItems }
  }
}

Hint

Use <ul> with <li v-for="item in items" :key="item.name"> and show name and price with currencySymbol.