Nuxt.js Server-Side Rendering

Build a production-ready Nuxt.js application with Server-Side Rendering (SSR) and SEO optimization.

Requirements

1. Page Structure & Routing

• Use file-based routing in pages/ directory.
• Implement dynamic routes (e.g., pages/blog/[id].vue).
• Use <NuxtLink> for internal navigation.
• Ensure proper meta tags for SEO using useHead or useSeoMeta.

2. Data Fetching

• Use useFetch for server-side data fetching.
• Implement proper error handling and loading states.
• Use useAsyncData for complex data requirements.

3. Server API

• Create API routes in server/api/.
• Use defineEventHandler for type-safe API handlers.
• Connect to a database or external service.

4. Middleware & State

• Implement route middleware for authentication (e.g., middleware/auth.ts).
• Use useState or Pinia for global state management.

Generate a complete example with a blog listing and detail page, including API routes and SEO configuration.