BranchesTags

Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started

Node.js v16 or v18 and pnpm are required to run the project.

# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store

Run and develop docs

pnpm run dev --filter='docs'

Architecture

Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.

Shopware Frontends Architecture

API Client

This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.

Composables

An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.

CMS Base

An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.

Helpers

A set of helper functions related to price formatting, translation handling, UI state, or URL handling.

Project Templates

We offer different project templates to get started with Shopware Frontends.

Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.

Shopware Frontends Techstack

See the templates section for other project templates and how to use them.

Key Features

Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.

Shopware native

Shopware Frontends is built for Shopware 6. No compromises or generic implementations — it works just you would expect it to. Core concepts like content management, checkout, or payment are deeply integrated and fully functional

Cloud first

Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud. No themes, plugins or server access required. Even your developer IDE can be started in the cloud.

Stable

Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events), hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes. Especially for big frontend projects this drastically reduces the complexity of platform updates.

Efficient

There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling. Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.

Flexible

No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions to what your site can look like. Build your site in a lego-block-manner by using prepared templates or just get creative using all of Tailwind.css’ features.

Fast

Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend. Common metrics like page speed and lighthouse scores are constantly monitored.

About

Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.

shopware-frontends-docs.vercel.app/

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started
Node.js v16 or v18 and pnpm are required to run the project.
# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store
Run and develop docs
pnpm run dev --filter='docs'
Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
Shopware Frontends Architecture
API Client
This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.
Composables
An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.
CMS Base
An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.
Helpers
A set of helper functions related to price formatting, translation handling, UI state, or URL handling.
Project Templates
We offer different project templates to get started with Shopware Frontends.
Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.
Shopware Frontends Techstack
See the templates section for other project templates and how to use them.
Key Features
Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.
Shopware native
Shopware Frontends is built for Shopware 6.
No compromises or generic implementations — it works just you would expect it to.
Core concepts like content management, checkout, or payment are deeply integrated and fully functional
Cloud first
Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud.
No themes, plugins or server access required.
Even your developer IDE can be started in the cloud.
Stable
Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events),
hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes.
Especially for big frontend projects this drastically reduces the complexity of platform updates.
Efficient
There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling.
Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions
and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.
Flexible
No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions
to what your site can look like. Build your site in a lego-block-manner by using prepared templates
or just get creative using all of Tailwind.css’ features.
Fast
Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering
wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend.
Common metrics like page speed and lighthouse scores are constantly monitored.
About
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
shopware-frontends-docs.vercel.app/
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started
Node.js v16 or v18 and pnpm are required to run the project.
# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store
Run and develop docs
pnpm run dev --filter='docs'
Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
Shopware Frontends Architecture
API Client
This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.
Composables
An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.
CMS Base
An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.
Helpers
A set of helper functions related to price formatting, translation handling, UI state, or URL handling.
Project Templates
We offer different project templates to get started with Shopware Frontends.
Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.
Shopware Frontends Techstack
See the templates section for other project templates and how to use them.
Key Features
Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.
Shopware native
Shopware Frontends is built for Shopware 6.
No compromises or generic implementations — it works just you would expect it to.
Core concepts like content management, checkout, or payment are deeply integrated and fully functional
Cloud first
Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud.
No themes, plugins or server access required.
Even your developer IDE can be started in the cloud.
Stable
Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events),
hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes.
Especially for big frontend projects this drastically reduces the complexity of platform updates.
Efficient
There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling.
Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions
and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.
Flexible
No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions
to what your site can look like. Build your site in a lego-block-manner by using prepared templates
or just get creative using all of Tailwind.css’ features.
Fast
Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering
wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend.
Common metrics like page speed and lighthouse scores are constantly monitored.
About
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
shopware-frontends-docs.vercel.app/
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started
Node.js v16 or v18 and pnpm are required to run the project.
# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store
Run and develop docs
pnpm run dev --filter='docs'
Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
Shopware Frontends Architecture
API Client
This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.
Composables
An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.
CMS Base
An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.
Helpers
A set of helper functions related to price formatting, translation handling, UI state, or URL handling.
Project Templates
We offer different project templates to get started with Shopware Frontends.
Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.
Shopware Frontends Techstack
See the templates section for other project templates and how to use them.
Key Features
Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.
Shopware native
Shopware Frontends is built for Shopware 6.
No compromises or generic implementations — it works just you would expect it to.
Core concepts like content management, checkout, or payment are deeply integrated and fully functional
Cloud first
Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud.
No themes, plugins or server access required.
Even your developer IDE can be started in the cloud.
Stable
Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events),
hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes.
Especially for big frontend projects this drastically reduces the complexity of platform updates.
Efficient
There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling.
Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions
and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.
Flexible
No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions
to what your site can look like. Build your site in a lego-block-manner by using prepared templates
or just get creative using all of Tailwind.css’ features.
Fast
Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering
wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend.
Common metrics like page speed and lighthouse scores are constantly monitored.
About
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
shopware-frontends-docs.vercel.app/
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started
Node.js v16 or v18 and pnpm are required to run the project.
# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store
Run and develop docs
pnpm run dev --filter='docs'
Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
Shopware Frontends Architecture
API Client
This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.
Composables
An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.
CMS Base
An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.
Helpers
A set of helper functions related to price formatting, translation handling, UI state, or URL handling.
Project Templates
We offer different project templates to get started with Shopware Frontends.
Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.
Shopware Frontends Techstack
See the templates section for other project templates and how to use them.
Key Features
Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.
Shopware native
Shopware Frontends is built for Shopware 6.
No compromises or generic implementations — it works just you would expect it to.
Core concepts like content management, checkout, or payment are deeply integrated and fully functional
Cloud first
Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud.
No themes, plugins or server access required.
Even your developer IDE can be started in the cloud.
Stable
Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events),
hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes.
Especially for big frontend projects this drastically reduces the complexity of platform updates.
Efficient
There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling.
Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions
and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.
Flexible
No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions
to what your site can look like. Build your site in a lego-block-manner by using prepared templates
or just get creative using all of Tailwind.css’ features.
Fast
Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering
wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend.
Common metrics like page speed and lighthouse scores are constantly monitored.
About
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
shopware-frontends-docs.vercel.app/
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started
Node.js v16 or v18 and pnpm are required to run the project.
# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store
Run and develop docs
pnpm run dev --filter='docs'
Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
Shopware Frontends Architecture
API Client
This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.
Composables
An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.
CMS Base
An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.
Helpers
A set of helper functions related to price formatting, translation handling, UI state, or URL handling.
Project Templates
We offer different project templates to get started with Shopware Frontends.
Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.
Shopware Frontends Techstack
See the templates section for other project templates and how to use them.
Key Features
Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.
Shopware native
Shopware Frontends is built for Shopware 6.
No compromises or generic implementations — it works just you would expect it to.
Core concepts like content management, checkout, or payment are deeply integrated and fully functional
Cloud first
Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud.
No themes, plugins or server access required.
Even your developer IDE can be started in the cloud.
Stable
Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events),
hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes.
Especially for big frontend projects this drastically reduces the complexity of platform updates.
Efficient
There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling.
Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions
and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.
Flexible
No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions
to what your site can look like. Build your site in a lego-block-manner by using prepared templates
or just get creative using all of Tailwind.css’ features.
Fast
Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering
wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend.
Common metrics like page speed and lighthouse scores are constantly monitored.
About
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
shopware-frontends-docs.vercel.app/
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started
Node.js v16 or v18 and pnpm are required to run the project.
# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store
Run and develop docs
pnpm run dev --filter='docs'
Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
Shopware Frontends Architecture
API Client
This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.
Composables
An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.
CMS Base
An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.
Helpers
A set of helper functions related to price formatting, translation handling, UI state, or URL handling.
Project Templates
We offer different project templates to get started with Shopware Frontends.
Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.
Shopware Frontends Techstack
See the templates section for other project templates and how to use them.
Key Features
Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.
Shopware native
Shopware Frontends is built for Shopware 6.
No compromises or generic implementations — it works just you would expect it to.
Core concepts like content management, checkout, or payment are deeply integrated and fully functional
Cloud first
Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud.
No themes, plugins or server access required.
Even your developer IDE can be started in the cloud.
Stable
Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events),
hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes.
Especially for big frontend projects this drastically reduces the complexity of platform updates.
Efficient
There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling.
Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions
and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.
Flexible
No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions
to what your site can look like. Build your site in a lego-block-manner by using prepared templates
or just get creative using all of Tailwind.css’ features.
Fast
Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering
wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend.
Common metrics like page speed and lighthouse scores are constantly monitored.
About
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
shopware-frontends-docs.vercel.app/
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation

📚 Docs | 💬 Discussions | 🚀 Try it out

Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.

Getting started
Node.js v16 or v18 and pnpm are required to run the project.
# Install dependencies
pnpm i
# Build packages
pnpm run build --filter='./packages/*'# Run project base
pnpm run dev --filter=vue-demo-store
Run and develop docs
pnpm run dev --filter='docs'
Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
Shopware Frontends Architecture
API Client
This package provides abstraction to Shopware's Store API and manages authentication state and request/response schemas.
Composables
An opinionated set of Vue.js composables like useProduct or useCustomer to use business logic and state in any Vue.js project.
CMS Base
An implementation of all default Shopware Sections, Blocks and Elements in Tailwind.css.
Helpers
A set of helper functions related to price formatting, translation handling, UI state, or URL handling.
Project Templates
We offer different project templates to get started with Shopware Frontends.
Our demo store template is a non-production-ready reference implementation of an eCommerce storefront, based on Tailwind.css and Nuxt 3.
Shopware Frontends Techstack
See the templates section for other project templates and how to use them.
Key Features
Shopware Frontends combines the best of the worlds of frontend development, Shopware 6 and your business requirements.
Shopware native
Shopware Frontends is built for Shopware 6.
No compromises or generic implementations — it works just you would expect it to.
Core concepts like content management, checkout, or payment are deeply integrated and fully functional
Cloud first
Shopware Frontends is designed to work only with HTTP APIs available in Shopware Cloud.
No themes, plugins or server access required.
Even your developer IDE can be started in the cloud.
Stable
Shopware Frontends doesn’t rely on Shopware’s volatile internal APIs (such as twig blocks, DAL or Events),
hence not being subject to breaking changes in those APIs, as opposed to Twig Storefront themes.
Especially for big frontend projects this drastically reduces the complexity of platform updates.
Efficient
There is no lock-in on technologies or frontend tooling. Shopware Frontends comes prepared with a smart default of tooling.
Vue3, Vite, Nuxt3 and unocss (Tailwind.css) — each by themselves coming with a rich ecosystem of tooling, extensions
and integrations can be replaced and extended to meet any projects needs. This tech-stack is the definition of superior Developer Experience and rapid prototyping.
Flexible
No theming system means no inheritance magic, no compatibility issues, no update efforts, no restrictions
to what your site can look like. Build your site in a lego-block-manner by using prepared templates
or just get creative using all of Tailwind.css’ features.
Fast
Shopware Frontends is fast during development, deployment and production. It applies server-side-rendering
wherever possible — code splitting, below-the-fold-rendering, and lazy-loading are built into the frontend.
Common metrics like page speed and lighthouse scores are constantly monitored.
About
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
shopware-frontends-docs.vercel.app/
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages