Build a storefront Theme

These tutorials walk you through building a Theme: the front end of a revenexx Storefront. You start from a runnable example, add your own Blökkli blocks, wire one to live catalog data, style it with design tokens that brand per tenant, and ship it to a real domain.

What a Theme is

A Theme is a Nuxt 4 server-rendered site that renders a customer's Storefront. It is registered and installed like an app: you publish it once, it appears in the Cockpit Theme marketplace, and a customer activates it on their domain. One deployed Theme can serve many tenants — the catalog and branding differ per request, the code does not.

Two things make a Theme more than a plain Nuxt site:

• Blökkli blocks. Editors compose pages by dragging and dropping blocks on a canvas in Cockpit. Each block is a Vue component you write; the Theme declares which blocks it offers in its manifest. A page is data (an ordered list of blocks and their props), not code, so the customer's content team ships everyday page changes without touching the codebase.
• Design tokens. The Theme's look is driven by CSS custom properties. The same build serves every tenant; each tenant's colors and logo are applied at runtime, so a rebrand is a token change, not a redeploy.

What you'll build

Across these tutorials you'll take a Theme from scaffold to live:

1. Build your first Theme — scaffold from the sample Theme, read the manifest, run it locally, and deploy a first version.
2. Customize blocks — write a Blökkli block, register it, and connect one to live catalog data the shell-first way.
3. Theme tokens and styling — drive the look with CSS custom properties, brand per tenant at runtime, and support light and dark.
4. Deploy your storefront — ship from Git or the revenexx CLI, use preview domains, roll back, and activate per domain.

Prerequisites

• Node.js 22 or newer and npm. A Theme is a Nuxt 4 app; you build it with npm run build.
• Working knowledge of Nuxt 4 and Vue 3 (the <script setup> composition API). If you're new to storefronts on revenexx, read Storefronts first for the bigger picture.
• A revenexx account and a tenant to deploy to, plus the revenexx CLI signed in if you want to deploy from your terminal.
• Git if you want Git-connected deploys.

How a Theme talks to the platform

A Theme has two kinds of traffic, and they take two different paths:

• The front end (HTML, server-rendered pages, assets) is served on the Theme's own domain. This is what a buyer's browser loads.
• Catalog and commerce data comes from the API gateway at https://api.revenexx.com. The Theme's server-side API routes call the gateway and forward the per-request tenant context, so every request returns the right tenant's data automatically.

You don't wire up multi-tenancy yourself. On a deployed Theme the platform resolves the tenant from the request host and injects it per request; your server-side routes read it and pass it along. The rule to remember: treat the tenant as per-request state, never a process-wide constant.

Where to go next

Start with Build your first Theme. For reference while you work, keep Blökkli blocks and Theming open.