[{"data":1,"prerenderedAt":551},["ShallowReactive",2],{"sideproject-en-ecommerce-headless-laravel-lunar-nuxt4":3},{"id":4,"title":5,"body":6,"date":513,"description":514,"extension":515,"featured":516,"image":517,"locale":518,"meta":519,"navigation":537,"order":494,"path":538,"repo":539,"seo":540,"status":541,"stem":542,"technologies":543,"url":539,"__hash__":550},"sideprojects\u002Fen\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4.md","Headless Ecommerce Demo (2026)",{"type":7,"value":8,"toc":486},"minimark",[9,13,17,22,38,45,49,54,57,79,83,115,119,123,129,144,150,167,172,186,190,196,210,215,231,236,247,251,271,275,279,301,305,325,329,341,345,349,369,373,393,397,417,421,438,442,449,452,464,473,475,481],[10,11,5],"h1",{"id":12},"headless-ecommerce-demo-2026",[14,15,16],"p",{},"A headless ecommerce demo that fully decouples the store management backend from the public-facing frontend.",[18,19,21],"h2",{"id":20},"the-project","The Project",[14,23,24,28,29,32,33,36],{},[25,26,27],"strong",{},"ecommerce.albertsarle.com"," is a complete implementation of an online store with headless architecture: the backend runs at ",[25,30,31],{},"ecommerceapi.albertsarle.com"," (Laravel + Lunar PHP) and the frontend is a fully independent Nuxt 4 application that consumes the REST API.",[34,35],"br",{},[34,37],{},[14,39,40,41,43],{},"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.",[34,42],{},[34,44],{},[18,46,48],{"id":47},"how-it-works","How It Works",[50,51,53],"h3",{"id":52},"headless-architecture","Headless Architecture",[14,55,56],{},"The headless model separates two clearly distinct responsibilities:",[58,59,60,67,73],"ol",{},[61,62,63,66],"li",{},[25,64,65],{},"Backend (Laravel + Lunar PHP)"," → Manages products, categories, cart, orders, stock, and authentication. Exposes a REST API consumed by the frontend.",[61,68,69,72],{},[25,70,71],{},"Frontend (Nuxt 4 + Vue 3)"," → Renders pages with SSR, manages user state with Pinia, and delivers a fast, optimized experience.",[61,74,75,78],{},[25,76,77],{},"Support services"," → Redis for cache and sessions, MeiliSearch for full-text search, PostgreSQL as the main database.",[50,80,82],{"id":81},"purchase-flow","Purchase Flow",[58,84,85,91,97,103,109],{},[61,86,87,90],{},[25,88,89],{},"Discovery"," → The user browses the catalog (514 products, 6 categories) filtering by category, price, availability, and brand",[61,92,93,96],{},[25,94,95],{},"Search"," → MeiliSearch delivers instant results with autocomplete",[61,98,99,102],{},[25,100,101],{},"Product page"," → Image gallery, description, specifications, and related products",[61,104,105,108],{},[25,106,107],{},"Cart"," → Persistent management with Redis, order summary, and shipping calculation",[61,110,111,114],{},[25,112,113],{},"Checkout"," → Authentication flow with Laravel Sanctum",[18,116,118],{"id":117},"technical-architecture","Technical Architecture",[50,120,122],{"id":121},"backend-laravel-lunar-php","Backend: Laravel + Lunar PHP",[14,124,125,128],{},[25,126,127],{},"Lunar PHP"," is an open-source ecommerce engine for Laravel that provides models and business logic out-of-the-box:",[130,131,132,135,138,141],"ul",{},[61,133,134],{},"Product management with variants, attributes, and per-currency pricing",[61,136,137],{},"Hierarchical category system",[61,139,140],{},"Cart and order engine",[61,142,143],{},"Admin Hub for catalog management",[14,145,146,149],{},[25,147,148],{},"Laravel Sail"," (Docker) orchestrates all services:",[130,151,152,155,158,161,164],{},[61,153,154],{},"PHP 8.3 (app container)",[61,156,157],{},"PostgreSQL 16 (database)",[61,159,160],{},"Redis (cache, sessions, and queues)",[61,162,163],{},"MeiliSearch (search engine)",[61,165,166],{},"Mailpit (development emails)",[14,168,169],{},[25,170,171],{},"Security and performance:",[130,173,174,177,180,183],{},[61,175,176],{},"Rate limiting configured per endpoint (API: 60 req\u002Fmin, Auth: 5 req\u002Fmin, Search: 30 req\u002Fmin)",[61,178,179],{},"Security headers (CSP, HSTS, X-Frame-Options)",[61,181,182],{},"Response caching with Redis",[61,184,185],{},"Eager loading to avoid the N+1 problem",[50,187,189],{"id":188},"frontend-nuxt-4-vue-3","Frontend: Nuxt 4 + Vue 3",[14,191,192,195],{},[25,193,194],{},"Nuxt 4 with SSR"," for optimal SEO and fast First Contentful Paint:",[130,197,198,201,204,207],{},[61,199,200],{},"Server-rendered pages for correct indexing",[61,202,203],{},"Dynamic sitemap and Schema.org (JSON-LD)",[61,205,206],{},"Open Graph tags for social media",[61,208,209],{},"hreflang for Spanish and Catalan versions",[14,211,212],{},[25,213,214],{},"State and data:",[130,216,217,220,228],{},[61,218,219],{},"Pinia for global state management (cart, user, filters)",[61,221,222,223,227],{},"Nuxt's native ",[224,225,226],"code",{},"useFetch"," for API calls with automatic caching",[61,229,230],{},"TypeScript for type safety throughout the project",[14,232,233],{},[25,234,235],{},"PWA with Workbox:",[130,237,238,241,244],{},[61,239,240],{},"Service Worker for asset and API response caching",[61,242,243],{},"Manifest configured for app installation",[61,245,246],{},"Differentiated caching strategies for images vs. data",[50,248,250],{"id":249},"external-services","External Services",[130,252,253,259,265],{},[61,254,255,258],{},[25,256,257],{},"MeiliSearch",": Full-text search with relevance ranking, faceted filters, and instant autocomplete",[61,260,261,264],{},[25,262,263],{},"Redis",": API response caching, session management, and background job queues",[61,266,267,270],{},[25,268,269],{},"PostgreSQL 16",": Complex relationships between products, categories, variants, and orders",[18,272,274],{"id":273},"tech-stack","Tech Stack",[50,276,278],{"id":277},"backend","Backend",[130,280,281,284,287,289,292,295,298],{},[61,282,283],{},"Laravel 11 & PHP 8.3",[61,285,286],{},"Lunar PHP 1.x (ecommerce engine)",[61,288,269],{},[61,290,291],{},"Redis (cache, sessions, queues)",[61,293,294],{},"MeiliSearch (full-text search)",[61,296,297],{},"Laravel Sanctum (API authentication)",[61,299,300],{},"Laravel Sail (Docker)",[50,302,304],{"id":303},"frontend","Frontend",[130,306,307,310,313,316,319,322],{},[61,308,309],{},"Nuxt 4 & Vue 3 (Composition API)",[61,311,312],{},"TypeScript",[61,314,315],{},"Pinia (state management)",[61,317,318],{},"Tailwind CSS & Flowbite",[61,320,321],{},"@nuxtjs\u002Fi18n (Spanish + Catalan)",[61,323,324],{},"@vite-pwa\u002Fnuxt (PWA + Workbox)",[50,326,328],{"id":327},"infrastructure","Infrastructure",[130,330,331,334,336,339],{},[61,332,333],{},"Docker & Docker Compose",[61,335,148],{},[61,337,338],{},"Bruno (API test collection)",[61,340,166],{},[18,342,344],{"id":343},"key-features","Key Features",[50,346,348],{"id":347},"catalog-and-search","Catalog and Search",[130,350,351,354,357,360,363,366],{},[61,352,353],{},"✅ 514 products across 6 categories",[61,355,356],{},"✅ Filters by category (with counters), price, availability",[61,358,359],{},"✅ Configurable sorting (relevance, price, newest)",[61,361,362],{},"✅ Full-text search with MeiliSearch",[61,364,365],{},"✅ Catalog pagination",[61,367,368],{},"✅ Breadcrumbs on product pages",[50,370,372],{"id":371},"user-experience","User Experience",[130,374,375,378,381,384,387,390],{},[61,376,377],{},"✅ SSR for SEO and speed",[61,379,380],{},"✅ Responsive design (mobile, tablet, desktop)",[61,382,383],{},"✅ Installable PWA with offline cache",[61,385,386],{},"✅ Trust bar (shipping, returns, support)",[61,388,389],{},"✅ Persistent cart",[61,391,392],{},"✅ Static pages (FAQ, shipping, returns, contact)",[50,394,396],{"id":395},"seo-and-marketing","SEO and Marketing",[130,398,399,402,405,408,411,414],{},[61,400,401],{},"✅ Full Server-Side Rendering",[61,403,404],{},"✅ Dynamic sitemap",[61,406,407],{},"✅ Schema.org \u002F JSON-LD",[61,409,410],{},"✅ Open Graph tags",[61,412,413],{},"✅ Multi-language with hreflang (ES + CA)",[61,415,416],{},"✅ Semantic URLs for products and categories",[50,418,420],{"id":419},"system","System",[130,422,423,426,429,432,435],{},[61,424,425],{},"✅ Documented REST API (OpenAPI \u002F Bruno)",[61,427,428],{},"✅ Rate limiting per endpoint",[61,430,431],{},"✅ Security headers",[61,433,434],{},"✅ Admin Hub (Lunar) for catalog management",[61,436,437],{},"✅ Structured logs",[18,439,441],{"id":440},"conclusions","Conclusions",[14,443,444,445,448],{},"The project demonstrates that it is possible to build a production-quality headless ecommerce with ",[25,446,447],{},"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.",[450,451],"hr",{},[14,453,454,457,458],{},[25,455,456],{},"Live demo",": ",[459,460,461],"a",{"href":461,"rel":462},"https:\u002F\u002Fecommerce.albertsarle.com",[463],"nofollow",[14,465,466,457,469],{},[25,467,468],{},"Backend API",[459,470,471],{"href":471,"rel":472},"https:\u002F\u002Fecommerceapi.albertsarle.com",[463],[450,474],{},[14,476,477],{},[478,479,480],"em",{},"Deployed in March 2026",[14,482,483],{},[478,484,485],{},"Developed by Albert Sarlé",{"title":487,"searchDepth":488,"depth":488,"links":489},"",2,[490,491,496,501,506,512],{"id":20,"depth":488,"text":21},{"id":47,"depth":488,"text":48,"children":492},[493,495],{"id":52,"depth":494,"text":53},3,{"id":81,"depth":494,"text":82},{"id":117,"depth":488,"text":118,"children":497},[498,499,500],{"id":121,"depth":494,"text":122},{"id":188,"depth":494,"text":189},{"id":249,"depth":494,"text":250},{"id":273,"depth":488,"text":274,"children":502},[503,504,505],{"id":277,"depth":494,"text":278},{"id":303,"depth":494,"text":304},{"id":327,"depth":494,"text":328},{"id":343,"depth":488,"text":344,"children":507},[508,509,510,511],{"id":347,"depth":494,"text":348},{"id":371,"depth":494,"text":372},{"id":395,"depth":494,"text":396},{"id":419,"depth":494,"text":420},{"id":440,"depth":488,"text":441},"2026-03-13T12:00:00Z","Headless ecommerce demo built with Laravel Lunar (API backend) and Nuxt 4 (SSR frontend), with PWA support, advanced search, and multi-language architecture.","md",false,"https:\u002F\u002Fres.cloudinary.com\u002Fdnyvmvkqi\u002Fimage\u002Fupload\u002F\u002Fc_scale,f_auto,q_auto,w_900\u002Fheadless_ecommerce_demo_laravel_lunar_nuxt_hliwsh.png","en",{"slug":520,"type":521,"categories":522,"tags":523,"achievements":530,"liveUrl":461},"ecommerce-headless-laravel-lunar-nuxt4","sideproject",[521],[524,525,127,526,263,257,527,528,529],"Laravel & PHP","Nuxt 4 & Vue 3","PostgreSQL","Docker & Sail","Tailwind CSS","PWA",[531,532,533,534,535,536],"Headless architecture with REST API and decoupled frontend","514 products across 6 categories with advanced filters","SSR with Nuxt 4 for optimal SEO and performance","Full-text search with MeiliSearch","PWA support with Service Worker and offline cache","Multi-language (Spanish and Catalan) with hreflang",true,"\u002Fen\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4",null,{"title":5,"description":514},"published","en\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4",[283,286,309,312,269,544,545,546,318,547,548,549],"Redis (cache & sessions)","MeiliSearch (search)","Docker & Laravel Sail","Pinia","PWA (Workbox)","i18n (ES + CA)","vxmY4PGBiLGkUFZTFhzSW649miRFilS0R5Yuekq-zRU",1784025929023]