@shopbite-de/storefront

🍕 ShopBite Storefront

A headless Shopware 6 storefront built for food delivery.

Nuxt 4 · Vue 3 · Tailwind CSS v4 · TypeScript — shipped as a reusable Nuxt layer, so every shop is a handful of config lines instead of a fork.

Why this exists

Generic shop templates don't know that a kitchen closes at 22:00, that a pizza comes with four toppings priced individually, or that "delivery in 30 minutes" has to be validated against today's opening hours and the public holiday calendar.

ShopBite does. It's a pure headless frontend — no Shopware template engine, no Twig — talking to the Store API and to the custom routes added by the ShopBite Shopware plugin.

Features

Quick start

pnpm install
cp .env.example .env
pnpm dev

The shop is now running on http://localhost:3000.

Prerequisites — Node.js LTS, pnpm 10+, and a Shopware 6 instance with the ShopBite plugin installed (required for business hours, holidays and shop config).

Minimum configuration

See .env.example for the full list.

Use it as a Nuxt layer

This package is published to npm and designed to be extended, not cloned. A complete shop looks like this:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@shopbite-de/storefront"],
  runtimeConfig: {
    public: {
      site: {
        name: "Masala Mio",
        description: "Indische Küche, italienisch gedacht",
      },
    },
  },
});

Everything — pages, components, composables, server routes — comes along. Override any file by recreating it at the same path in your own app/ directory.

Scripts

pnpm dev              # Dev server on :3000
pnpm build            # Production build
pnpm preview          # Preview the production build
pnpm generate         # Static generation

pnpm typecheck        # nuxt typecheck — must stay at zero errors
pnpm lint:fix         # Prettier + ESLint, autofix

pnpm test:unit        # Vitest (unit + Nuxt environments)
pnpm test:e2e         # Playwright, Chromium — needs a running server
pnpm test:ui          # Vitest UI

pnpm generate-types   # Regenerate Store API types after plugin changes

Run a single test:

pnpm vitest run test/nuxt/useBusinessHours.test.ts
pnpm playwright test test/e2e/simple-checkout-as-recurring-customer.test.ts

Architecture

app/
├── components/     Cart, Checkout, Product, Food, Navigation, Header, …
├── composables/    Business logic — useBusinessHours, useDeliveryTime, useAddToCart, …
├── pages/          German routes: /speisekarte, /warenkorb, /konto, /bestellung
├── validation/     Zod schemas for forms
└── assets/css/     Tailwind v4 theme tokens
server/api/         Cached Store API proxies + the Geoapify key guard
api-types/          Auto-generated Store API types (pnpm generate-types)
content/            Legal pages as Markdown (@nuxt/content)
test/               unit · nuxt · e2e

Composables carry the domain. @shopware/composables is extended as a Nuxt layer, so project composables in app/composables/ transparently override the upstream ones. API responses are validated with Zod before they reach a component.

Key ones worth knowing:

• useBusinessHours — opening hours with multiple intervals per day (Sunday is day 7)
• useDeliveryTime — slot validation in 5-minute steps, prep time and holiday aware
• useAddToCart — extras/toppings become a container line item keyed by UUID v5
• useShopBiteConfig — delivery config and checkout state from the plugin
• useAddressAutocomplete — Geoapify behind /api/address/autocomplete

Docker

docker compose up --build     # → http://localhost:3000
./container pnpm -v           # run a command inside the container

Contributing

CI runs setup → lint → unit → e2e on every push. Before opening a PR:

pnpm lint:fix && pnpm typecheck && pnpm test:unit

Engineering notes for tricky changes live in docs/notes/; day-to-day conventions and gotchas are in CLAUDE.md.

Related services

License

MIT — built with 🔥 by @veliu