@shopwell/unocss-design-tokens-layer

🚀 Demo | 🚀 Extended Demo | 📚 Docu | ☁️ Try it out | Deploy on Vercel | 💬 Discuss | Discord Channel

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

Getting started (contribution)

Node.js (current LTS) and pnpm are required to run the project. To be sure about the version compatibility you can enable Node's corepack.

# Install dependencies
pnpm i

# Build packages
pnpm run build --filter='./packages/*'

# Run project base
pnpm run dev --filter=vue-starter-template

Run and develop docs

pnpm run docs:env
pnpm run docs:link
pnpm run docs:preview

The documentation commands require a separately supplied ../developer-portal/docs-cli.cjs. docs:env exits with a clear error when that local tool is unavailable.

Architecture

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

API Client

This package provides abstraction to Shopwell'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 Shopwell 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 Shopwell Frontends.

Our Vue Starter Template is a production-ready foundation for building custom Shopwell storefronts, based on Tailwind.css and Nuxt 4.

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

Key Features

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

Shopwell native

Shopwell Frontends is built for Shopwell 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

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

Stable

Shopwell Frontends doesn’t rely on Shopwell’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. Shopwell Frontends comes prepared with a smart default of tooling. Vue3, Vite, Nuxt 4 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

Shopwell 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.