Headless Ecommerce Demo (2026)

A headless ecommerce demo that fully decouples the store management backend from the public-facing frontend.

The Project

ecommerce.albertsarle.com is a complete implementation of an online store with headless architecture: the backend runs at ecommerceapi.albertsarle.com (Laravel + Lunar PHP) and the frontend is a fully independent Nuxt 4 application that consumes the REST API.

The goal of the project is to demonstrate how to build a modern, scalable, SEO-optimized ecommerce without relying on monolithic platforms like WooCommerce or Shopify. The result: a store with 514 products, 6 categories, a shopping cart, a filter system, and an architecture ready for real production use.

How It Works

Headless Architecture

The headless model separates two clearly distinct responsibilities:

1. Backend (Laravel + Lunar PHP) → Manages products, categories, cart, orders, stock, and authentication. Exposes a REST API consumed by the frontend.
2. Frontend (Nuxt 4 + Vue 3) → Renders pages with SSR, manages user state with Pinia, and delivers a fast, optimized experience.
3. Support services → Redis for cache and sessions, MeiliSearch for full-text search, PostgreSQL as the main database.

Purchase Flow

1. Discovery → The user browses the catalog (514 products, 6 categories) filtering by category, price, availability, and brand
2. Search → MeiliSearch delivers instant results with autocomplete
3. Product page → Image gallery, description, specifications, and related products
4. Cart → Persistent management with Redis, order summary, and shipping calculation
5. Checkout → Authentication flow with Laravel Sanctum

Technical Architecture

Backend: Laravel + Lunar PHP

Lunar PHP is an open-source ecommerce engine for Laravel that provides models and business logic out-of-the-box:

• Product management with variants, attributes, and per-currency pricing
• Hierarchical category system
• Cart and order engine
• Admin Hub for catalog management

Laravel Sail (Docker) orchestrates all services:

• PHP 8.3 (app container)
• PostgreSQL 16 (database)
• Redis (cache, sessions, and queues)
• MeiliSearch (search engine)
• Mailpit (development emails)

Security and performance:

• Rate limiting configured per endpoint (API: 60 req/min, Auth: 5 req/min, Search: 30 req/min)
• Security headers (CSP, HSTS, X-Frame-Options)
• Response caching with Redis
• Eager loading to avoid the N+1 problem

Frontend: Nuxt 4 + Vue 3

Nuxt 4 with SSR for optimal SEO and fast First Contentful Paint:

• Server-rendered pages for correct indexing
• Dynamic sitemap and Schema.org (JSON-LD)
• Open Graph tags for social media
• hreflang for Spanish and Catalan versions

State and data:

• Pinia for global state management (cart, user, filters)
• Nuxt's native useFetch for API calls with automatic caching
• TypeScript for type safety throughout the project

PWA with Workbox:

• Service Worker for asset and API response caching
• Manifest configured for app installation
• Differentiated caching strategies for images vs. data

External Services

• MeiliSearch: Full-text search with relevance ranking, faceted filters, and instant autocomplete
• Redis: API response caching, session management, and background job queues
• PostgreSQL 16: Complex relationships between products, categories, variants, and orders

Tech Stack

Backend

• Laravel 11 & PHP 8.3
• Lunar PHP 1.x (ecommerce engine)
• PostgreSQL 16
• Redis (cache, sessions, queues)
• MeiliSearch (full-text search)
• Laravel Sanctum (API authentication)
• Laravel Sail (Docker)

Frontend

• Nuxt 4 & Vue 3 (Composition API)
• TypeScript
• Pinia (state management)
• Tailwind CSS & Flowbite
• @nuxtjs/i18n (Spanish + Catalan)
• @vite-pwa/nuxt (PWA + Workbox)

Infrastructure

• Docker & Docker Compose
• Laravel Sail
• Bruno (API test collection)
• Mailpit (development emails)

Key Features

Catalog and Search

• ✅ 514 products across 6 categories
• ✅ Filters by category (with counters), price, availability
• ✅ Configurable sorting (relevance, price, newest)
• ✅ Full-text search with MeiliSearch
• ✅ Catalog pagination
• ✅ Breadcrumbs on product pages

User Experience

• ✅ SSR for SEO and speed
• ✅ Responsive design (mobile, tablet, desktop)
• ✅ Installable PWA with offline cache
• ✅ Trust bar (shipping, returns, support)
• ✅ Persistent cart
• ✅ Static pages (FAQ, shipping, returns, contact)

SEO and Marketing

• ✅ Full Server-Side Rendering
• ✅ Dynamic sitemap
• ✅ Schema.org / JSON-LD
• ✅ Open Graph tags
• ✅ Multi-language with hreflang (ES + CA)
• ✅ Semantic URLs for products and categories

System

• ✅ Documented REST API (OpenAPI / Bruno)
• ✅ Rate limiting per endpoint
• ✅ Security headers
• ✅ Admin Hub (Lunar) for catalog management
• ✅ Structured logs

Conclusions

The project demonstrates that it is possible to build a production-quality headless ecommerce with Laravel Lunar + Nuxt 4: the architecture is scalable, SEO works correctly thanks to SSR, and the separation between backend and frontend allows each layer to evolve independently.

Live demo: https://ecommerce.albertsarle.com

Backend API: https://ecommerceapi.albertsarle.com

Deployed in March 2026

Developed by Albert Sarlé