Let's Build: Crafting a Nuxt 3 App from Scratch
summary
Builds a Nuxt 3 recipe app that calls the Spoonacular API (requests limited to 100 items), exposes an internal GET /api/recipes endpoint using $fetch and useFetch, and validates responses with Zod/vbot to get TypeScript-safe types. Implements a Nitro file cache (cache key prefix, maxAge ≈ 1 day) to avoid API limits, adds a custom image provider for ingredient images (sizes 100/250/500), uses Nuxt UI for layout, and deploys to Vercel — the app runs with expected data after a small deployment hiccup.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 0:57Creating a Recipe App
- 11:05Cache
- 13:50Fetch
- 17:17UI
- 26:15Columns
- 29:01Measures
- 30:54Custom Provider
- 33:18Image Provider
- 35:53Responsive Images
- 37:38Steps
- 44:13Deploy
related talks
38mBeyond Static: Building with Nuxt 3 and Nitro
26mOptimising Developer Experience with Nuxt 3
32mNuxt3 in Action
35mNuxt, Nitro and h3 in Practice - Unleash the Full Stack Beast
34mNuxt + Strapi + Composition API = ❤️
26mThe State of Nuxt
33mNuxt's Hidden Treasures: 8 Gems Every Nuxt Dev Should Know!
32mUnderstand the hard parts of Nuxt