[{"data":1,"prerenderedAt":550},["ShallowReactive",2],{"sideproject-ca-ecommerce-headless-laravel-lunar-nuxt4":3},{"id":4,"title":5,"body":6,"date":512,"description":513,"extension":514,"featured":515,"image":516,"locale":517,"meta":518,"navigation":536,"order":493,"path":537,"repo":538,"seo":539,"status":540,"stem":541,"technologies":542,"url":538,"__hash__":549},"sideprojects\u002Fca\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4.md","Ecommerce Headless Demo (2026)",{"type":7,"value":8,"toc":485},"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,230,235,246,250,270,274,278,300,304,324,328,340,344,348,368,372,392,396,416,420,437,441,448,451,463,472,474,480],[10,11,5],"h1",{"id":12},"ecommerce-headless-demo-2026",[14,15,16],"p",{},"Una demo d'ecommerce headless que separa completament el backend de gestió de la botiga del frontend de cara al públic",[18,19,21],"h2",{"id":20},"el-projecte","El Projecte",[14,23,24,28,29,32,33,36],{},[25,26,27],"strong",{},"ecommerce.albertsarle.com"," és una implementació completa d'una botiga online amb arquitectura headless: el backend corre a ",[25,30,31],{},"ecommerceapi.albertsarle.com"," (Laravel + Lunar PHP) i el frontend és una aplicació Nuxt 4 completament independent que consumeix l'API REST.",[34,35],"br",{},[34,37],{},[14,39,40,41,43],{},"L'objectiu del projecte és demostrar com construir un ecommerce modern, escalable i optimitzat per SEO sense dependre de plataformes monolítiques com WooCommerce o Shopify. El resultat: una botiga amb 514 productes, 6 categories, carret de compra, sistema de filtres, i arquitectura preparada per a producció real.",[34,42],{},[34,44],{},[18,46,48],{"id":47},"com-funciona","Com Funciona",[50,51,53],"h3",{"id":52},"arquitectura-headless","Arquitectura Headless",[14,55,56],{},"El model headless separa dues responsabilitats ben diferenciades:",[58,59,60,67,73],"ol",{},[61,62,63,66],"li",{},[25,64,65],{},"Backend (Laravel + Lunar PHP)"," → Gestiona productes, categories, carret, comandes, stock i autenticació. Exposa una API REST consumida pel frontend.",[61,68,69,72],{},[25,70,71],{},"Frontend (Nuxt 4 + Vue 3)"," → Renderitza les pàgines amb SSR, gestiona l'estat de l'usuari amb Pinia, i ofereix una experiència ràpida i optimitzada.",[61,74,75,78],{},[25,76,77],{},"Serveis de suport"," → Redis per a caché i sessions, MeiliSearch per a cerca full-text, PostgreSQL com a base de dades principal.",[50,80,82],{"id":81},"flux-de-compra","Flux de compra",[58,84,85,91,97,103,109],{},[61,86,87,90],{},[25,88,89],{},"Descoberta"," → L'usuari navega el catàleg (514 productes, 6 categories) filtrant per categoria, preu, disponibilitat i marca",[61,92,93,96],{},[25,94,95],{},"Cerca"," → MeiliSearch ofereix resultats instantanis amb autocomplete",[61,98,99,102],{},[25,100,101],{},"Fitxa de producte"," → Galeria d'imatges, descripció, especificacions i productes relacionats",[61,104,105,108],{},[25,106,107],{},"Carret"," → Gestió persistent amb Redis, resum de comanda i càlcul d'enviament",[61,110,111,114],{},[25,112,113],{},"Checkout"," → Flux d'autenticació amb Laravel Sanctum",[18,116,118],{"id":117},"arquitectura-tècnica","Arquitectura Tècnica",[50,120,122],{"id":121},"backend-laravel-lunar-php","Backend: Laravel + Lunar PHP",[14,124,125,128],{},[25,126,127],{},"Lunar PHP"," és un ecommerce engine open-source per a Laravel que proporciona els models i la lògica de negoci out-of-the-box:",[130,131,132,135,138,141],"ul",{},[61,133,134],{},"Gestió de productes amb variants, atributs i preus per divisa",[61,136,137],{},"Sistema de categories jeràrquiques",[61,139,140],{},"Motor de carret i comandes",[61,142,143],{},"Admin Hub per gestionar el catàleg",[14,145,146,149],{},[25,147,148],{},"Laravel Sail"," (Docker) orquestra tots els serveis:",[130,151,152,155,158,161,164],{},[61,153,154],{},"PHP 8.3 (contenidor app)",[61,156,157],{},"PostgreSQL 16 (base de dades)",[61,159,160],{},"Redis (caché, sessions i cues)",[61,162,163],{},"MeiliSearch (motor de cerca)",[61,165,166],{},"Mailpit (emails de desenvolupament)",[14,168,169],{},[25,170,171],{},"Seguretat i rendiment:",[130,173,174,177,180,183],{},[61,175,176],{},"Rate limiting configurat per endpoint (API: 60 req\u002Fmin, Auth: 5 req\u002Fmin, Cerca: 30 req\u002Fmin)",[61,178,179],{},"Headers de seguretat (CSP, HSTS, X-Frame-Options)",[61,181,182],{},"Caché de respostes amb Redis",[61,184,185],{},"Eager loading per evitar el problema N+1",[50,187,189],{"id":188},"frontend-nuxt-4-vue-3","Frontend: Nuxt 4 + Vue 3",[14,191,192,195],{},[25,193,194],{},"Nuxt 4 amb SSR"," per a un SEO òptim i First Contentful Paint ràpid:",[130,197,198,201,204,207],{},[61,199,200],{},"Pàgines renderitzades al servidor per a indexació correcta",[61,202,203],{},"Sitemap dinàmic i Schema.org (JSON-LD)",[61,205,206],{},"Open Graph tags per a xarxes socials",[61,208,209],{},"hreflang per a versió castellà i català",[14,211,212],{},[25,213,214],{},"Estat i dades:",[130,216,217,220,227],{},[61,218,219],{},"Pinia per a la gestió de l'estat global (carret, usuari, filtres)",[61,221,222,226],{},[223,224,225],"code",{},"useFetch"," natiu de Nuxt per a crides API amb caché automàtica",[61,228,229],{},"TypeScript per a seguretat de tipus en tot el projecte",[14,231,232],{},[25,233,234],{},"PWA amb Workbox:",[130,236,237,240,243],{},[61,238,239],{},"Service Worker per a caché d'assets i respostes API",[61,241,242],{},"Manifest configurat per a instal·lació com a app",[61,244,245],{},"Estratègies de caché diferenciades per a imatges vs. dades",[50,247,249],{"id":248},"serveis-externs","Serveis Externs",[130,251,252,258,264],{},[61,253,254,257],{},[25,255,256],{},"MeiliSearch",": Cerca full-text amb rànquing de rellevància, filtres facetats i autocomplete instantani",[61,259,260,263],{},[25,261,262],{},"Redis",": Caché de respostes API, gestió de sessions i cues de treballs en segon pla",[61,265,266,269],{},[25,267,268],{},"PostgreSQL 16",": Relacions complexes entre productes, categories, variants i comandes",[18,271,273],{"id":272},"stack-tecnològic","Stack Tecnològic",[50,275,277],{"id":276},"backend","Backend",[130,279,280,283,286,288,291,294,297],{},[61,281,282],{},"Laravel 11 & PHP 8.3",[61,284,285],{},"Lunar PHP 1.x (ecommerce engine)",[61,287,268],{},[61,289,290],{},"Redis (caché, sessions, cues)",[61,292,293],{},"MeiliSearch (cerca full-text)",[61,295,296],{},"Laravel Sanctum (autenticació API)",[61,298,299],{},"Laravel Sail (Docker)",[50,301,303],{"id":302},"frontend","Frontend",[130,305,306,309,312,315,318,321],{},[61,307,308],{},"Nuxt 4 & Vue 3 (Composition API)",[61,310,311],{},"TypeScript",[61,313,314],{},"Pinia (gestió d'estat)",[61,316,317],{},"Tailwind CSS & Flowbite",[61,319,320],{},"@nuxtjs\u002Fi18n (castellà + català)",[61,322,323],{},"@vite-pwa\u002Fnuxt (PWA + Workbox)",[50,325,327],{"id":326},"infraestructura","Infraestructura",[130,329,330,333,335,338],{},[61,331,332],{},"Docker & Docker Compose",[61,334,148],{},[61,336,337],{},"Bruno (col·lecció de tests d'API)",[61,339,166],{},[18,341,343],{"id":342},"característiques-principals","Característiques Principals",[50,345,347],{"id":346},"catàleg-i-cerca","Catàleg i Cerca",[130,349,350,353,356,359,362,365],{},[61,351,352],{},"✅ 514 productes en 6 categories",[61,354,355],{},"✅ Filtres per categoria (amb comptadors), preu, disponibilitat",[61,357,358],{},"✅ Ordenació configurable (rellevància, preu, novetat)",[61,360,361],{},"✅ Cerca full-text amb MeiliSearch",[61,363,364],{},"✅ Paginació del catàleg",[61,366,367],{},"✅ Breadcrumbs a la fitxa de producte",[50,369,371],{"id":370},"experiència-dusuari","Experiència d'Usuari",[130,373,374,377,380,383,386,389],{},[61,375,376],{},"✅ SSR per a SEO i velocitat",[61,378,379],{},"✅ Disseny responsive (mòbil, tablet, desktop)",[61,381,382],{},"✅ PWA instal·lable amb caché offline",[61,384,385],{},"✅ Trust bar (enviament, devolucions, atenció)",[61,387,388],{},"✅ Carret persistent",[61,390,391],{},"✅ Pàgines estàtiques (FAQ, enviament, devolucions, contacte)",[50,393,395],{"id":394},"seo-i-marketing","SEO i Marketing",[130,397,398,401,404,407,410,413],{},[61,399,400],{},"✅ Server-Side Rendering complet",[61,402,403],{},"✅ Sitemap dinàmic",[61,405,406],{},"✅ Schema.org \u002F JSON-LD",[61,408,409],{},"✅ Open Graph tags",[61,411,412],{},"✅ Multi-idioma amb hreflang (ES + CA)",[61,414,415],{},"✅ URLs semàntiques per productes i categories",[50,417,419],{"id":418},"sistema","Sistema",[130,421,422,425,428,431,434],{},[61,423,424],{},"✅ API REST documentada (OpenAPI \u002F Bruno)",[61,426,427],{},"✅ Rate limiting per endpoint",[61,429,430],{},"✅ Headers de seguretat",[61,432,433],{},"✅ Admin Hub (Lunar) per gestió del catàleg",[61,435,436],{},"✅ Logs estructurats",[18,438,440],{"id":439},"conclusions","Conclusions",[14,442,443,444,447],{},"El projecte demostra que és possible construir un ecommerce headless de qualitat professional amb ",[25,445,446],{},"Laravel Lunar + Nuxt 4",": l'arquitectura és escalable, el SEO funciona correctament gràcies al SSR, i la separació entre backend i frontend permet evolucionar cada capa de forma independent.",[449,450],"hr",{},[14,452,453,456,457],{},[25,454,455],{},"Demo en viu",": ",[458,459,460],"a",{"href":460,"rel":461},"https:\u002F\u002Fecommerce.albertsarle.com",[462],"nofollow",[14,464,465,456,468],{},[25,466,467],{},"API Backend",[458,469,470],{"href":470,"rel":471},"https:\u002F\u002Fecommerceapi.albertsarle.com",[462],[449,473],{},[14,475,476],{},[477,478,479],"em",{},"Desplegat el març de 2026",[14,481,482],{},[477,483,484],{},"Desenvolupat per Albert Sarlé",{"title":486,"searchDepth":487,"depth":487,"links":488},"",2,[489,490,495,500,505,511],{"id":20,"depth":487,"text":21},{"id":47,"depth":487,"text":48,"children":491},[492,494],{"id":52,"depth":493,"text":53},3,{"id":81,"depth":493,"text":82},{"id":117,"depth":487,"text":118,"children":496},[497,498,499],{"id":121,"depth":493,"text":122},{"id":188,"depth":493,"text":189},{"id":248,"depth":493,"text":249},{"id":272,"depth":487,"text":273,"children":501},[502,503,504],{"id":276,"depth":493,"text":277},{"id":302,"depth":493,"text":303},{"id":326,"depth":493,"text":327},{"id":342,"depth":487,"text":343,"children":506},[507,508,509,510],{"id":346,"depth":493,"text":347},{"id":370,"depth":493,"text":371},{"id":394,"depth":493,"text":395},{"id":418,"depth":493,"text":419},{"id":439,"depth":487,"text":440},"2026-03-13T12:00:00Z","Demo d'ecommerce headless construïda amb Laravel Lunar (backend API) i Nuxt 4 (frontend SSR), amb suport per PWA, cerca avançada i arquitectura multi-idioma.","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","ca",{"slug":519,"type":520,"categories":521,"tags":522,"achievements":529,"liveUrl":460},"ecommerce-headless-laravel-lunar-nuxt4","sideproject",[520],[523,524,127,525,262,256,526,527,528],"Laravel & PHP","Nuxt 4 & Vue 3","PostgreSQL","Docker & Sail","Tailwind CSS","PWA",[530,531,532,533,534,535],"Arquitectura headless amb API REST i frontend desacoblat","514 productes en 6 categories amb filtres avançats","SSR amb Nuxt 4 per SEO i rendiment òptims","Cerca full-text amb MeiliSearch","Suport PWA amb Service Worker i caché offline","Multi-idioma (castellà i català) amb hreflang",true,"\u002Fca\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4",null,{"title":5,"description":513},"published","ca\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4",[282,285,308,311,268,543,544,545,317,546,547,548],"Redis (cache & sessions)","MeiliSearch (cerca)","Docker & Laravel Sail","Pinia","PWA (Workbox)","i18n (ES + CA)","vrjHlq4Irm-uHX8Nel_ewHLfXc8Y2rj_7vhWB19tMVA",1784025928760]