Here's a comprehensive example of nested resources in Nuxt 3 with a parent [slug] page passing props to subpages:This example demonstrates a complete nested resource structure in Nuxt 3 with:

Key Features:

1. Parent Layout (pages/products/[slug]/index.vue):
   • Fetches product data using the slug parameter
   • Provides navigation between subpages
   • Uses <NuxtPage> to render child pages
   • Passes props to child components via :product and :related-products
   • Also demonstrates provide/inject pattern as an alternative
2. Child Pages receive props from parent:
   • Details page: Shows product information and related products
   • Reviews page: Displays customer reviews with pagination
   • Specs page: Technical specifications with comparison table
3. Two Ways to Pass Data:
   • Props: Using <NuxtPage :product="product" :related-products="relatedProducts" />
   • Provide/Inject: Using provide() in parent and inject() in children
4. Features Included:
   • Dynamic routing with [slug] parameter
   • SEO meta tags
   • Responsive navigation
   • Data fetching from API
   • Proper TypeScript/composition API usage
   • Styled components with scoped CSS

The parent page acts as a layout that fetches data once and shares it with all subpages, avoiding redundant API calls and ensuring consistent data across the nested routes.

// File structure: // pages/ // products/ // slug/ // index.vue (parent page) // details.vue // reviews.vue // specs.vue // index.vue

// pages/products/slug/index.vue (Parent Layout)

// pages/products/slug/details.vue (Child page)

// pages/products/slug/reviews.vue (Child page)

// pages/products/slug/specs.vue (Child page)

// Example API route: server/api/products/slug.js