[{"data":1,"prerenderedAt":550},["ShallowReactive",2],{"sideproject-es-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\u002Fes\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 de ecommerce headless que separa completamente el backend de gestión de la tienda del frontend de cara al público.",[18,19,21],"h2",{"id":20},"el-proyecto","El Proyecto",[14,23,24,28,29,32,33,36],{},[25,26,27],"strong",{},"ecommerce.albertsarle.com"," es una implementación completa de una tienda online con arquitectura headless: el backend corre en ",[25,30,31],{},"ecommerceapi.albertsarle.com"," (Laravel + Lunar PHP) y el frontend es una aplicación Nuxt 4 completamente independiente que consume la API REST.",[34,35],"br",{},[34,37],{},[14,39,40,41,43],{},"El objetivo del proyecto es demostrar cómo construir un ecommerce moderno, escalable y optimizado para SEO sin depender de plataformas monolíticas como WooCommerce o Shopify. El resultado: una tienda con 514 productos, 6 categorías, carrito de compra, sistema de filtros, y arquitectura preparada para producción real.",[34,42],{},[34,44],{},[18,46,48],{"id":47},"cómo-funciona","Cómo Funciona",[50,51,53],"h3",{"id":52},"arquitectura-headless","Arquitectura Headless",[14,55,56],{},"El modelo headless separa dos responsabilidades bien diferenciadas:",[58,59,60,67,73],"ol",{},[61,62,63,66],"li",{},[25,64,65],{},"Backend (Laravel + Lunar PHP)"," → Gestiona productos, categorías, carrito, pedidos, stock y autenticación. Expone una API REST consumida por el frontend.",[61,68,69,72],{},[25,70,71],{},"Frontend (Nuxt 4 + Vue 3)"," → Renderiza las páginas con SSR, gestiona el estado del usuario con Pinia, y ofrece una experiencia rápida y optimizada.",[61,74,75,78],{},[25,76,77],{},"Servicios de soporte"," → Redis para caché y sesiones, MeiliSearch para búsqueda full-text, PostgreSQL como base de datos principal.",[50,80,82],{"id":81},"flujo-de-compra","Flujo de compra",[58,84,85,91,97,103,109],{},[61,86,87,90],{},[25,88,89],{},"Descubrimiento"," → El usuario navega el catálogo (514 productos, 6 categorías) filtrando por categoría, precio, disponibilidad y marca",[61,92,93,96],{},[25,94,95],{},"Búsqueda"," → MeiliSearch ofrece resultados instantáneos con autocomplete",[61,98,99,102],{},[25,100,101],{},"Ficha de producto"," → Galería de imágenes, descripción, especificaciones y productos relacionados",[61,104,105,108],{},[25,106,107],{},"Carrito"," → Gestión persistente con Redis, resumen de pedido y cálculo de envío",[61,110,111,114],{},[25,112,113],{},"Checkout"," → Flujo de autenticación con 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"," es un ecommerce engine open-source para Laravel que proporciona los modelos y la lógica de negocio out-of-the-box:",[130,131,132,135,138,141],"ul",{},[61,133,134],{},"Gestión de productos con variantes, atributos y precios por divisa",[61,136,137],{},"Sistema de categorías jerárquicas",[61,139,140],{},"Motor de carrito y pedidos",[61,142,143],{},"Admin Hub para gestionar el catálogo",[14,145,146,149],{},[25,147,148],{},"Laravel Sail"," (Docker) orquesta todos los servicios:",[130,151,152,155,158,161,164],{},[61,153,154],{},"PHP 8.3 (contenedor app)",[61,156,157],{},"PostgreSQL 16 (base de datos)",[61,159,160],{},"Redis (caché, sesiones y colas)",[61,162,163],{},"MeiliSearch (motor de búsqueda)",[61,165,166],{},"Mailpit (emails de desarrollo)",[14,168,169],{},[25,170,171],{},"Seguridad y rendimiento:",[130,173,174,177,180,183],{},[61,175,176],{},"Rate limiting configurado por endpoint (API: 60 req\u002Fmin, Auth: 5 req\u002Fmin, Búsqueda: 30 req\u002Fmin)",[61,178,179],{},"Headers de seguridad (CSP, HSTS, X-Frame-Options)",[61,181,182],{},"Caché de respuestas con Redis",[61,184,185],{},"Eager loading para 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 con SSR"," para un SEO óptimo y First Contentful Paint rápido:",[130,197,198,201,204,207],{},[61,199,200],{},"Páginas renderizadas en el servidor para indexación correcta",[61,202,203],{},"Sitemap dinámico y Schema.org (JSON-LD)",[61,205,206],{},"Open Graph tags para redes sociales",[61,208,209],{},"hreflang para versión castellano y catalán",[14,211,212],{},[25,213,214],{},"Estado y datos:",[130,216,217,220,227],{},[61,218,219],{},"Pinia para la gestión del estado global (carrito, usuario, filtros)",[61,221,222,226],{},[223,224,225],"code",{},"useFetch"," nativo de Nuxt para llamadas API con caché automática",[61,228,229],{},"TypeScript para seguridad de tipos en todo el proyecto",[14,231,232],{},[25,233,234],{},"PWA con Workbox:",[130,236,237,240,243],{},[61,238,239],{},"Service Worker para caché de assets y respuestas API",[61,241,242],{},"Manifest configurado para instalación como app",[61,244,245],{},"Estrategias de caché diferenciadas para imágenes vs. datos",[50,247,249],{"id":248},"servicios-externos","Servicios Externos",[130,251,252,258,264],{},[61,253,254,257],{},[25,255,256],{},"MeiliSearch",": Búsqueda full-text con ranking de relevancia, filtros facetados y autocomplete instantáneo",[61,259,260,263],{},[25,261,262],{},"Redis",": Caché de respuestas API, gestión de sesiones y colas de trabajos en segundo plano",[61,265,266,269],{},[25,267,268],{},"PostgreSQL 16",": Relaciones complejas entre productos, categorías, variantes y pedidos",[18,271,273],{"id":272},"stack-tecnológico","Stack Tecnológico",[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é, sesiones, colas)",[61,292,293],{},"MeiliSearch (búsqueda full-text)",[61,295,296],{},"Laravel Sanctum (autenticación 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ón de estado)",[61,316,317],{},"Tailwind CSS & Flowbite",[61,319,320],{},"@nuxtjs\u002Fi18n (castellano + catalán)",[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 (colección de tests de API)",[61,339,166],{},[18,341,343],{"id":342},"características-principales","Características Principales",[50,345,347],{"id":346},"catálogo-y-búsqueda","Catálogo y Búsqueda",[130,349,350,353,356,359,362,365],{},[61,351,352],{},"✅ 514 productos en 6 categorías",[61,354,355],{},"✅ Filtros por categoría (con contadores), precio, disponibilidad",[61,357,358],{},"✅ Ordenación configurable (relevancia, precio, novedad)",[61,360,361],{},"✅ Búsqueda full-text con MeiliSearch",[61,363,364],{},"✅ Paginación del catálogo",[61,366,367],{},"✅ Breadcrumbs en la ficha de producto",[50,369,371],{"id":370},"experiencia-de-usuario","Experiencia de Usuario",[130,373,374,377,380,383,386,389],{},[61,375,376],{},"✅ SSR para SEO y velocidad",[61,378,379],{},"✅ Diseño responsive (móvil, tablet, desktop)",[61,381,382],{},"✅ PWA instalable con caché offline",[61,384,385],{},"✅ Trust bar (envío, devoluciones, atención)",[61,387,388],{},"✅ Carrito persistente",[61,390,391],{},"✅ Páginas estáticas (FAQ, envío, devoluciones, contacto)",[50,393,395],{"id":394},"seo-y-marketing","SEO y Marketing",[130,397,398,401,404,407,410,413],{},[61,399,400],{},"✅ Server-Side Rendering completo",[61,402,403],{},"✅ Sitemap dinámico",[61,405,406],{},"✅ Schema.org \u002F JSON-LD",[61,408,409],{},"✅ Open Graph tags",[61,411,412],{},"✅ Multi-idioma con hreflang (ES + CA)",[61,414,415],{},"✅ URLs semánticas para productos y categorías",[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 por endpoint",[61,429,430],{},"✅ Headers de seguridad",[61,432,433],{},"✅ Admin Hub (Lunar) para gestión del catálogo",[61,435,436],{},"✅ Logs estructurados",[18,438,440],{"id":439},"conclusiones","Conclusiones",[14,442,443,444,447],{},"El proyecto demuestra que es posible construir un ecommerce headless de calidad profesional con ",[25,445,446],{},"Laravel Lunar + Nuxt 4",": la arquitectura es escalable, el SEO funciona correctamente gracias al SSR, y la separación entre backend y frontend permite evolucionar cada capa de forma independiente.",[449,450],"hr",{},[14,452,453,456,457],{},[25,454,455],{},"Demo en vivo",": ",[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",{},"Desplegado en marzo de 2026",[14,481,482],{},[477,483,484],{},"Desarrollado por 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 de ecommerce headless construida con Laravel Lunar (backend API) y Nuxt 4 (frontend SSR), con soporte para PWA, búsqueda avanzada y 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","es",{"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 con API REST y frontend desacoplado","514 productos en 6 categorías con filtros avanzados","SSR con Nuxt 4 para SEO y rendimiento óptimos","Búsqueda full-text con MeiliSearch","Soporte PWA con Service Worker y caché offline","Multi-idioma (castellano y catalán) con hreflang",true,"\u002Fes\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4",null,{"title":5,"description":513},"published","es\u002Fsideprojects\u002Fecommerce-headless-laravel-lunar-nuxt4",[282,285,308,311,268,543,544,545,317,546,547,548],"Redis (caché & sesiones)","MeiliSearch (búsqueda)","Docker & Laravel Sail","Pinia","PWA (Workbox)","i18n (ES + CA)","I84Q-H4nJTdHm1VxfI141gTERS5gn4_PURtJnzJzemA",1784025928997]