[{"data":1,"prerenderedAt":651},["ShallowReactive",2],{"navigation:en":3,"auto-image:entries:\u002Fen\u002Fblog\u002Fshopware-frontends-headless-storefront-nuxt":55,"blog:en:\u002Fen\u002Fblog\u002Fshopware-frontends-headless-storefront-nuxt":56,"content-translation-map":613},[4],{"title":5,"path":6,"stem":7,"children":8,"page":54},"En","\u002Fen","en",[9],{"title":10,"path":11,"stem":12,"children":13,"page":54},"Services","\u002Fen\u002Fservices","en\u002Fservices",[14,19,24,29,34,39,44,49],{"title":15,"path":16,"stem":17,"translationKey":18,"icon":18},"AI-Powered Content Production","\u002Fen\u002Fservices\u002Fai-content-creation","en\u002Fservices\u002Fai-content-creation","ai-content-creation",{"title":20,"path":21,"stem":22,"translationKey":23,"icon":23},"eCommerce Development","\u002Fen\u002Fservices\u002Fecommerce","en\u002Fservices\u002Fecommerce","ecommerce",{"title":25,"path":26,"stem":27,"translationKey":28,"icon":28},"EDI Integration","\u002Fen\u002Fservices\u002Fedi-integration","en\u002Fservices\u002Fedi-integration","edi-integration",{"title":30,"path":31,"stem":32,"translationKey":33,"icon":33},"ERP Integration","\u002Fen\u002Fservices\u002Ferp-integration","en\u002Fservices\u002Ferp-integration","erp-integration",{"title":35,"path":36,"stem":37,"translationKey":38,"icon":38},"Custom Development","\u002Fen\u002Fservices\u002Findividual-development","en\u002Fservices\u002Findividual-development","individual-development",{"title":40,"path":41,"stem":42,"translationKey":43,"icon":43},"System Integration","\u002Fen\u002Fservices\u002Fsystem-integration","en\u002Fservices\u002Fsystem-integration","system-integration",{"title":45,"path":46,"stem":47,"translationKey":48,"icon":48},"Migration & System Modernization","\u002Fen\u002Fservices\u002Fsystem-modernization-migration","en\u002Fservices\u002Fsystem-modernization-migration","system-modernization-migration",{"title":50,"path":51,"stem":52,"translationKey":53,"icon":53},"UX\u002FUI Design","\u002Fen\u002Fservices\u002Fux-ui-design","en\u002Fservices\u002Fux-ui-design","ux-ui-design",false,{},{"id":57,"title":58,"body":59,"description":578,"draft":54,"extension":579,"meta":580,"navigation":581,"path":582,"publishAt":583,"robots":584,"schemaOrg":585,"seo":597,"sitemap":600,"stem":604,"tags":605,"translationKey":611,"__hash__":612},"blog_en\u002Fen\u002Fblog\u002Fshopware-frontends-headless-storefront-nuxt.md","Shopware Frontends: Headless Storefront with Nuxt – Possibilities, Benefits and Limitations",{"type":60,"value":61,"toc":567},"minimark",[62,66,75,78,81,86,89,170,173,185,187,191,194,204,211,214,216,220,223,229,239,245,251,257,263,265,269,272,278,284,294,300,306,312,318,320,324,451,453,457,460,479,482,502,505,507,511,514,517,520,526,528,532,535],[63,64,58],"h1",{"id":65},"shopware-frontends-headless-storefront-with-nuxt-possibilities-benefits-and-limitations",[67,68,69,70,74],"p",{},"Shopware 6 was built ",[71,72,73],"nuxt-link",{"to":41},"API-first"," from the ground up. Every feature available in the classic Twig storefront is also\naccessible through the Store API. Shopware Frontends (formerly Shopware PWA, later Composable Frontends) leverages\nexactly that: a collection of NPM packages that lets you build your entire storefront frontend in Nuxt and Vue.js –\nfully decoupled from the PHP backend.",[67,76,77],{},"That sounds like maximum freedom. It is. But freedom comes at a cost: complexity, responsibility, and the question of\nwhether the effort is justified for your specific project.",[79,80],"hr",{},[82,83,85],"h2",{"id":84},"what-shopware-frontends-is-and-what-it-is-not","What Shopware Frontends Is – and What It Is Not",[67,87,88],{},"Shopware Frontends is not a ready-made shop. It is not a theme system and not a plugin ecosystem. It is a framework\ntoolkit consisting of several independently usable packages:",[90,91,92,105],"table",{},[93,94,95],"thead",{},[96,97,98,102],"tr",{},[99,100,101],"th",{},"Package",[99,103,104],{},"Purpose",[106,107,108,120,130,140,150,160],"tbody",{},[96,109,110,117],{},[111,112,113],"td",{},[114,115,116],"code",{},"@shopware\u002Fapi-client",[111,118,119],{},"TypeScript-based API client, framework-agnostic",[96,121,122,127],{},[111,123,124],{},[114,125,126],{},"@shopware\u002Fcomposables",[111,128,129],{},"Vue 3 composition functions for business logic (cart, user, listing, …)",[96,131,132,137],{},[111,133,134],{},[114,135,136],{},"@shopware\u002Fcms-base-layer",[111,138,139],{},"CMS components (Shopping Experiences) as a Nuxt layer in Tailwind\u002FUnoCSS",[96,141,142,147],{},[111,143,144],{},[114,145,146],{},"@shopware\u002Fnuxt-module",[111,148,149],{},"Nuxt module that configures and provides API client and composables",[96,151,152,157],{},[111,153,154],{},[114,155,156],{},"@shopware\u002Fapi-gen",[111,158,159],{},"Generates TypeScript types from your instance's OpenAPI specification",[96,161,162,167],{},[111,163,164],{},[114,165,166],{},"@shopware\u002Fhelpers",[111,168,169],{},"Utility functions for price formatting, translations, URL handling",[67,171,172],{},"The API client is not tied to Vue. You can use it with React, Svelte, or plain Node.js. The composables and CMS\ncomponents are Vue-specific and primarily designed for use with Nuxt.",[67,174,175,176,180,181,184],{},"Since late 2025, the ",[177,178,179],"strong",{},"Vue Starter Template"," is the recommended starting point. It is based on Nuxt 4, uses the ",[114,182,183],{},"app\u002F","\ndirectory structure, and is intended as a production-ready foundation – unlike the older Demo Store Template, which\nShopware itself classifies as not production-ready.",[79,186],{},[82,188,190],{"id":189},"architecture-how-the-decoupling-works","Architecture: How the Decoupling Works",[67,192,193],{},"The architecture follows a clear principle: Shopware 6 exclusively delivers data through the Store API. The Nuxt\nfrontend handles rendering, routing, state management, and caching.",[195,196,201],"pre",{"className":197,"code":199,"language":200},[198],"language-text","┌─────────────────┐         ┌─────────────────┐\n│  Nuxt Frontend  │◄──API──►│  Shopware 6     │\n│  (Vue 3 \u002F SSR)  │         │  (Store API)    │\n│  Composables    │         │  Business Logic │\n│  CMS Components │         │  ERP \u002F PIM      │\n└─────────────────┘         └─────────────────┘\n","text",[114,202,199],{"__ignoreMap":203},"",[67,205,206,207,210],{},"Communication runs through the ",[114,208,209],{},"sw-context-token",", which is persisted as a cookie and available in both SSR and\nclient-side contexts. All composables are globally registered and fully typed.",[67,212,213],{},"Nuxt gives you flexibility in rendering: SSR for SEO-relevant pages, client-side rendering for interactive areas, and\nISR or edge rendering via platforms like Vercel or Cloudflare Pages.",[79,215],{},[82,217,219],{"id":218},"what-shopware-frontends-enables","What Shopware Frontends Enables",[67,221,222],{},"Decoupling from the Twig storefront opens up possibilities that are either impossible or require significant effort in\nthe classic setup.",[67,224,225,228],{},[177,226,227],{},"Full control over the tech stack."," No Bootstrap lock-in, no Twig inheritance, no plugin compatibility matrix.\nTailwind\u002FUnoCSS, custom design systems, any UI library – it's all on the table. Your frontend becomes a product, not a\ntheme configuration.",[67,230,231,234,235,238],{},[177,232,233],{},"Modern rendering and performance."," SSR, code splitting, lazy loading, and below-the-fold rendering are natively built\ninto Nuxt. ",[71,236,237],{"to":46},"Core Web Vitals"," can be optimized precisely without fighting against the Shopware templating system. Edge\nrendering via Cloudflare or Vercel is directly achievable with the Nuxt stack.",[67,240,241,244],{},[177,242,243],{},"Reactive UI without workarounds."," Vue 3 offers reactivity out of the box. Interactive product configurators, live\nsearch, dynamic filters – everything that is cumbersome with the Shopware JS plugin system becomes manageable with the\nComposition API.",[67,246,247,250],{},[177,248,249],{},"Independent scaling."," Frontend and backend scale separately. Your Shopware backend only processes API requests while\nthe frontend runs on its own infrastructure. During traffic peaks, the frontend scales horizontally without burdening\nthe ERP.",[67,252,253,256],{},[177,254,255],{},"Multi-brand and multi-storefront."," Nuxt Layers let you maintain a shared foundation and build multiple brand-specific\nstorefronts on top. Cross-project code sharing becomes a standard Nuxt architecture decision instead of a theme\ninheritance problem.",[67,258,259,262],{},[177,260,261],{},"Independence from Shopware updates."," Since Shopware Frontends exclusively uses the Store API and does not rely on\ninternal APIs like Twig blocks, DAL, or events, backend updates carry significantly less risk. Upgrade complexity drops\nsubstantially.",[79,264],{},[82,266,268],{"id":267},"the-flip-side-where-the-limits-are","The Flip Side: Where the Limits Are",[67,270,271],{},"As convincing as the architecture looks on paper – in practice, there are concrete limitations you need to know before\nstarting a project.",[67,273,274,277],{},[177,275,276],{},"No plugin ecosystem."," Shopware Frontends is not compatible with apps, themes, or plugins from the classic storefront.\nEvery third-party extension must be checked for Store API endpoint availability. If it doesn't have them, you need to\nimplement both backend and frontend logic yourself. This significantly reduces the cost advantage of many marketplace\nplugins.",[67,279,280,283],{},[177,281,282],{},"Everything must be built."," The classic storefront delivers login, cart, checkout, wishlist, product filters, and CMS\nintegration out of the box. With Shopware Frontends, you start from the Vue Starter Template or from scratch. Even with\nthe CMS Base Layer, the road to a fully functional shop is considerably longer than with a Twig theme.",[67,285,286,289,290,293],{},[177,287,288],{},"Over-fetching and hidden complexity."," Behind the composables lies data fetching that is not always transparent. What\ndata is being loaded? How often? Is there client-side caching? A ",[114,291,292],{},"useCart"," call that reloads all product details with\nevery component mount is a real performance problem. Without deliberate state management and API optimization, N+1\nsituations emerge quickly.",[67,295,296,299],{},[177,297,298],{},"Higher infrastructure requirements."," SSR requires a Node.js server. That means additional infrastructure, additional\nmonitoring, and a deployment that goes beyond simple PHP hosting. With Vercel or Cloudflare, this is elegantly\nsolvable – with traditional hosting, it's additional overhead.",[67,301,302,305],{},[177,303,304],{},"Dual team competency required."," The backend stays PHP\u002FSymfony. The frontend becomes Node.js\u002FVue\u002FNuxt. You need either\ndevelopers who master both worlds or two specialized teams. Coordination between API changes in the backend and frontend\nadjustments is ongoing effort.",[67,307,308,311],{},[177,309,310],{},"CMS limitations."," Shopping Experiences are delivered as JSON via the API. Every block type must be implemented as a\nVue component in the frontend. The CMS Base Layer covers standard blocks, but custom blocks or plugin-based CMS\nextensions require custom development. Your marketing team can still manage content in the admin, but new block types\nalways require a frontend deploy.",[67,313,314,317],{},[177,315,316],{},"Code quality and type mismatches."," In practice, developers report inconsistencies in composable typing and occasional\ngaps between documented and actual behavior. The project is actively maintained – types are currently updated to\nShopware 6.7 – but you need to be prepared to work with a framework that hasn't yet reached the maturity of an\nestablished open-source project like Nuxt itself.",[79,319],{},[82,321,323],{"id":322},"classic-storefront-vs-shopware-frontends-decision-criteria","Classic Storefront vs. Shopware Frontends: Decision Criteria",[90,325,326,339],{},[93,327,328],{},[96,329,330,333,336],{},[99,331,332],{},"Criterion",[99,334,335],{},"Twig Storefront",[99,337,338],{},"Shopware Frontends",[106,340,341,352,363,374,385,396,407,418,429,440],{},[96,342,343,346,349],{},[111,344,345],{},"Time-to-market",[111,347,348],{},"Fast (themes, plugins)",[111,350,351],{},"Slow (custom development)",[96,353,354,357,360],{},[111,355,356],{},"Plugin compatibility",[111,358,359],{},"Full",[111,361,362],{},"API-based extensions only",[96,364,365,368,371],{},[111,366,367],{},"Frontend freedom",[111,369,370],{},"Limited (Twig\u002FBootstrap)",[111,372,373],{},"Full (Vue\u002FNuxt\u002FTailwind)",[96,375,376,379,382],{},[111,377,378],{},"Performance optimization",[111,380,381],{},"Limited",[111,383,384],{},"Full control (SSR, edge, CDN)",[96,386,387,390,393],{},[111,388,389],{},"Shopware update risk",[111,391,392],{},"High (theme\u002Fplugin matrix)",[111,394,395],{},"Low (Store API only)",[96,397,398,401,404],{},[111,399,400],{},"Infrastructure",[111,402,403],{},"PHP hosting sufficient",[111,405,406],{},"Node.js server required",[96,408,409,412,415],{},[111,410,411],{},"Team requirements",[111,413,414],{},"PHP\u002FTwig",[111,416,417],{},"PHP + Vue\u002FNuxt\u002FTypeScript",[96,419,420,423,426],{},[111,421,422],{},"Scalability",[111,424,425],{},"Vertical",[111,427,428],{},"Horizontal (frontend independent)",[96,430,431,434,437],{},[111,432,433],{},"CMS flexibility",[111,435,436],{},"Plug & play",[111,438,439],{},"Every block = Vue component",[96,441,442,445,448],{},[111,443,444],{},"Long-term maintainability",[111,446,447],{},"Depends on plugin compatibility",[111,449,450],{},"Depends on your own code",[79,452],{},[82,454,456],{"id":455},"when-does-the-headless-approach-pay-off","When Does the Headless Approach Pay Off?",[67,458,459],{},"The classic Twig storefront is the right choice when:",[461,462,463,467,470,473,476],"ul",{},[464,465,466],"li",{},"fast go-live matters more than maximum design freedom",[464,468,469],{},"the plugin ecosystem will be used heavily",[464,471,472],{},"your team primarily brings PHP\u002FTwig expertise",[464,474,475],{},"standard design and UX requirements are sufficient",[464,477,478],{},"budget and resources are limited",[67,480,481],{},"Shopware Frontends becomes compelling when:",[461,483,484,487,490,493,496,499],{},[464,485,486],{},"a custom frontend experience is strategically important",[464,488,489],{},"performance and Core Web Vitals are business-critical",[464,491,492],{},"multiple storefronts or brands need to be served from a single codebase",[464,494,495],{},"the frontend must scale independently from the backend",[464,497,498],{},"your organization has or wants to build Vue\u002FNuxt expertise",[464,500,501],{},"long-term independence from the Shopware theme\u002Fplugin matrix is desired",[67,503,504],{},"The decision is not binary. Shopware Frontends can also be integrated into an existing project – for specific areas like\na product configurator or a landing page – while the main shop continues to run on the classic storefront.",[79,506],{},[82,508,510],{"id":509},"conclusion","Conclusion",[67,512,513],{},"Shopware Frontends is not a drop-in replacement for the Twig storefront. It is an architectural decision with\nfar-reaching consequences for team structure, infrastructure, development velocity, and ongoing maintenance.",[67,515,516],{},"The gain lies in control, performance, and scalability. The cost is complexity, development effort, and the loss of the\nplugin ecosystem.",[67,518,519],{},"For projects where the frontend is a strategic differentiator, Shopware Frontends can be the right foundation. For\nprojects that need to go live quickly and fully leverage the Shopware ecosystem, the classic storefront remains the more\npragmatic choice.",[67,521,522,523],{},"The real question is not \"headless or not?\" but rather: ",[177,524,525],{},"What degree of frontend control does your business model\nrequire – and are you ready to carry the responsibility that comes with it?",[79,527],{},[82,529,531],{"id":530},"facing-this-decision","Facing This Decision?",[67,533,534],{},"Classic storefront or headless with Shopware Frontends – we advise honestly, even if the answer is \"stick with the Twig\nstorefront.\" In a brief conversation, we'll clarify whether a headless approach makes economic and technical sense for\nyour project.",[536,537,541],"div",{"className":538},[539,540],"text-center","not-prose",[71,542,561],{"className":543,"href":560},[544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559],"inline-block","text-white","px-4","py-1.5","text-base","font-semibold","leading-7","shadow-sm","ring-1","duration-300","ease","rounded-lg","bg-primary","ring-primary","hover:bg-secondary","hover:ring-secondary","\u002Fen\u002Fcontact",[67,562,563,564],{},"👉 ",[177,565,566],{},"Schedule a consultation",{"title":203,"searchDepth":568,"depth":568,"links":569},2,[570,571,572,573,574,575,576,577],{"id":84,"depth":568,"text":85},{"id":189,"depth":568,"text":190},{"id":218,"depth":568,"text":219},{"id":267,"depth":568,"text":268},{"id":322,"depth":568,"text":323},{"id":455,"depth":568,"text":456},{"id":509,"depth":568,"text":510},{"id":530,"depth":568,"text":531},"Technical guide to Shopware Frontends (Composable Frontends): architecture, package structure, use cases, and an honest assessment of advantages and disadvantages compared to the classic Twig storefront.","md",{},true,"\u002Fen\u002Fblog\u002Fshopware-frontends-headless-storefront-nuxt","2026-03-27 08:00:00",null,[586],{"headline":58,"mainEntityOfPage":587,"author":589,"publisher":594,"datePublished":595,"@type":596},{"@id":588},"#webpage",{"@id":590,"name":591,"url":592,"@type":593},"#identity","Kickbyte GmbH","https:\u002F\u002Fkickbyte.de","Organization",{"@id":590,"name":591,"url":592,"@type":593},"2026-03-27T08:00:00Z","BlogPosting",{"title":58,"description":578,"ogTitle":598,"ogDescription":578,"robots":599},"Shopware Frontends: Headless Storefront with Nuxt – Possibilities, Benefits and Limitations - Kickbyte","index,follow",{"loc":582,"lastmod":601,"changefreq":602,"priority":603},"2026-03-27","monthly",0.8,"en\u002Fblog\u002Fshopware-frontends-headless-storefront-nuxt",[606,607,608,609,610],"Shopware","Headless","Nuxt","Vue.js","E-Commerce","shopware-frontends-headless-storefront-nuxt","WRZIuJh-VSKc0D6FzSkk4TMWFg2kGNbprhojMwurssI",{"ai-content-creation":614,"ecommerce":617,"edi-integration":620,"erp-integration":623,"individual-development":626,"system-integration":629,"system-modernization-migration":632,"ux-ui-design":635,"agentic-commerce":638,"edi4jtl":640,"shopware-6-redis-configuration-mistakes":643,"shopware-6-use-cases":646,"shopware-frontends-headless-storefront-nuxt":649},{"en":615,"de":616},"\u002Fservices\u002Fai-content-creation","\u002Fleistungen\u002Fki-contentproduktion",{"en":618,"de":619},"\u002Fservices\u002Fecommerce","\u002Fleistungen\u002Fecommerce-entwicklung",{"en":621,"de":622},"\u002Fservices\u002Fedi-integration","\u002Fleistungen\u002Fedi-integration",{"en":624,"de":625},"\u002Fservices\u002Ferp-integration","\u002Fleistungen\u002Ferp-integration",{"en":627,"de":628},"\u002Fservices\u002Findividual-development","\u002Fleistungen\u002Findividuelle-softwareentwicklung",{"en":630,"de":631},"\u002Fservices\u002Fsystem-integration","\u002Fleistungen\u002Fsystemintegration",{"en":633,"de":634},"\u002Fservices\u002Fsystem-modernization-migration","\u002Fleistungen\u002Fmigration-systemmodernisierung",{"en":636,"de":637},"\u002Fservices\u002Fux-ui-design","\u002Fleistungen\u002Fux-ui-design",{"en":639,"de":639},"\u002Fblog\u002Fagentic-commerce",{"en":641,"de":642},"\u002Fblog\u002Fedi4jtl","\u002Fblog\u002Fedi-integration-jtl",{"en":644,"de":645},"\u002Fblog\u002Fshopware-6-redis-configuration-mistakes","\u002Fblog\u002Fshopware-6-redis-fehlkonfiguration",{"en":647,"de":648},"\u002Fblog\u002Fshopware-6-use-cases","\u002Fblog\u002Fshopware-6-wann-sinnvoll",{"en":650,"de":650},"\u002Fblog\u002Fshopware-frontends-headless-storefront-nuxt",1775522762804]