Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shopware/frontends
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
https://github.com/shopware/frontends
astrojs ecommerce hacktoberfest headless javascript nextjs nitro nuxt react serverless tailwindcss typescript unocss vercel vitepress vue vuejs
Last synced: about 5 hours ago
JSON representation
Shopware Frontends is a framework for building custom, headless storefronts with Shopware 6.
- Host: GitHub
- URL: https://github.com/shopware/frontends
- Owner: shopware
- License: mit
- Created: 2022-01-03T09:01:58.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-07T11:57:51.000Z (about 2 months ago)
- Last Synced: 2024-08-07T13:28:43.808Z (about 2 months ago)
- Topics: astrojs, ecommerce, hacktoberfest, headless, javascript, nextjs, nitro, nuxt, react, serverless, tailwindcss, typescript, unocss, vercel, vitepress, vue, vuejs
- Language: TypeScript
- Homepage: https://frontends.shopware.com
- Size: 21.8 MB
- Stars: 162
- Watchers: 26
- Forks: 47
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🚀 Demo | 📚 Docu | 
Try it out | 💬 Discuss | 
Channel
Shopware Frontends is Shopware's Vue.js framework for building custom storefronts.
---
## Getting started (contribution)
Node.js (current LTS) and [pnpm](https://pnpm.io/installation#using-npm) are required to run the project.
To be sure about the version compatibility you can enable Node's [corepack](https://nodejs.org/api/corepack.html).
```sh
# 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
```sh
pnpm run dev --filter='docs'
```
## Architecture
Shopware Frontends is a framework which is divided into separate modules of which some can be used independently.
**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.
See the [templates](https://frontends.shopware.com/getting-started/templates.html) 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.