Nuxt Recipe App

An elegant, responsive recipe browser — built with Nuxt 4, Vue 3, TypeScript, and TailwindCSS.

🔗 Live Demo | 💻 GitHub Repo

---

📌 Project Overview

A recipe discovery app where users can browse a variety of recipes, view detailed instructions, ingredient lists, and step-by-step preparation. Built with Nuxt 4 for SSR + SSG, Vue 3 composition API, and TypeScript for type safety. Styled with TailwindCSS for a clean, mobile-first look.

---

🌐 Live Preview

👉 https://nuxt-recipe-app-zeta.vercel.app

---

🛠 Technologies Used

Core Framework

Styling

Deployment

---

⚙️ Getting Started

📋 Prerequisites

• Node.js v20.x or higher
• npm v10.x or higher

📦 Installation

1. Clone the repository:

   git clone https://github.com/bcheban/nuxt-recipe-app.git
   cd nuxt-recipe-app

2. Install dependencies:

   npm install

3. Start the dev server:

   npm run dev

   The app will open at http://localhost:3000.

🧰 Available Scripts

Script	Description
npm run dev	Start the local Nuxt dev server
npm run build	Build for production
npm run preview	Preview the production build locally
npm run generate	Generate a static site

---

🚀 Features

• 🍳 Recipe Catalog – Browse a variety of recipes with images and summaries.
• 📖 Detail View – Full ingredient lists, prep steps, and serving info per recipe.
• 🔎 Filter / Search – Quickly narrow down by keyword or category.
• 🎨 Clean UI – Mobile-first TailwindCSS layout, generous whitespace.
• ⚡ SSR / SSG – Pre-rendered pages for fast first paint and SEO.
• 🔒 Type-Safe – End-to-end TypeScript.

---

📊 Lighthouse

---

Made with ❤️ by @bcheban