repository·main·Indexed 42 days ago
https://github.com/shopware/frontendsA Vue.js framework for building custom, high-performance storefronts for Shopware 6. It utilizes a cloud-first approach with HTTP APIs to decouple the frontend from internal platform APIs, providing a stable alternative to Twig-based themes.
The @shopware/unocss-design-tokens-layer is a Nuxt layer that provides the shared Shopware Frontends UnoCSS setup, design tokens, a reset stylesheet, and runtime support for resolving dynamic utility classes.
It is designed to be composed with other layers (like @shopware/cms-base-layer), allowing developers to keep design tokens separate from CMS-specific functionality.
Shopware Frontends employs multiple independent caching layers that compose to optimize performance. A request can be served from various levels, including the browser, a CDN, ISR-rendered HTML, the Shopware backend HTTP cache, or a fresh Store API call.
| Layer | What it caches | Where it runs | How you configure it |
|---|---|---|---|
Request layer (cacheableReads) | Anonymous Store API reads via GET routes | Composables -> HTTP infrastructure | shopware: { cacheableReads: true } |
Render layer (routeRules) | Rendered HTML (ISR / SWR), per-route headers | Nuxt / Nitro server | routeRules in nuxt.config.ts |
| Edge / CDN layer | GET responses and HTML with Cache-Control | CDN / reverse proxy | Cache-Control headers + your CDN |
| Backend HTTP cache | Store API GET responses (Varnish / Fastly) | Shopware backend | Shopware reverse-proxy config |
| Client state | Session, cart, user, listings, navigation | Browser memory | Shared composables, provide/inject |
| Assets / images | Optimized images, SVGs, static files | CDN / browser | @nuxt/image presets, route headers |
Note: ISR and routeRules caching only work in production builds on deployment targets that support them (e.g., Node server, Vercel, Netlify). They have no effect during nuxt dev.
The Composable Frontends ecosystem provides several built-in features to enhance frontend applications. Key features include:
The shopware/frontends repository provides integration documentation for commercial features available in the Rise, Evolve, and Beyond plans for Shopware. These integrations allow you to implement advanced business capabilities within your composable frontend.
Available commercial integrations include:
Shopware Frontends Recipes provide end-to-end explanations of how specific features are implemented. Instead of generic Vue tutorials, these recipes trace a single UI action through the entire technical stack, including:
Shopware Frontends is designed for high-performance, cloud-first storefront development with the following characteristics:
The @shopware/* packages are published through three distinct channels depending on your stability and testing requirements.
main but are not yet part of a stable release. These are unstable and change frequently.pkg.pr.new rather than npm.| Channel | Source | Stability | When to use |
| --- | --- | --- | --- |
| Stable | npm tag `latest` | Stable, semver | Production and normal app development. The default. |
| Canary | npm tag `canary` | Unstable, no semver | Test changes merged to `main` but not yet released. |
| PR preview | pkg-pr-new (not on npm) | Ephemeral, per-PR | Try the code from one specific open pull request. |The documentation is organized into several distinct sections. When adding new content, ensure it is categorized correctly:
The E-Commerce collection provides specialized elements and documentation for building common shopping experiences. You can implement the following core features using the provided composables and packages:
useListing composable to search for products, display them in a list, implement pagination, apply sortings, and use filters. The @shopware/helpers package can be used to assist with listing logic.useProductPrice composable.