Documentation

First Steps with the ShopBite Storefront

Congratulations on installing your ShopBite Storefront! This guide will walk you through the first steps.

Preparatory Steps

Ensure that the following prerequisites are met:

  • Shopware 6 is installed and functional
  • You have a domain for your storefront

Preparing Shopware

  1. Create Sales Channel:
    • Create a Storefront sales channel in Shopware
    • Alternatively, you can use an existing sales channel
    • More information: Storefront vs. Headless
  2. Domain Configuration:
    • Bind your domain to the sales channel
    • Ensure all configurations are complete

Installing Nuxt

A detailed guide for Nuxt installation can be found in the official Nuxt Documentation.

Step 1: Create Nuxt Project

Run the following command and navigate through the questions. Choose the default settings to create a new Nuxt application:

pnpm create nuxt@latest

Step 2: Install ShopBite Storefront Module

Install the ShopBite Storefront module and the required dev dependencies:

pnpm add @shopbite-de/storefront
pnpm add -D @nuxt/test-utils @nuxt/eslint @nuxt/hints

Step 3: Create Configuration Files

Create the following files with the appropriate content:

.env File:

# .env
NUXT_PUBLIC_APP_ENV="development"
NUXT_PUBLIC_STORE_URL="http://localhost:3000"

NUXT_PUBLIC_SHOPWARE_ENDPOINT="https://my-shopware-instance.de/store-api/"
NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN="SALES-CHANNEL-ACCESS-TOKEN"
NUXT_PUBLIC_SITE_COUNTRY_ID="YOUR-DEFAULT-COUNTRY-ID"

nuxt.config.ts File:

// nuxt.config.ts
export default defineNuxtConfig({
   extends: ['@shopbite-de/storefront'],
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true }
})

app/assets/css/main.css File:

/* app/assets/css/main.css */
@import "@shopbite-de/storefront/app/assets/css/main.css";

content.config.ts File:

// content.config.ts
import contentConfig from "@shopbite-de/storefront/content.config";
export default contentConfig;

Step 4: Update package.json

Your package.json should look something like this:

{
  "name": "storefront",
  "type": "module",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@shopbite-de/storefront": "^1.6.0",
    "nuxt": "^4.2.2"
  },
  "devDependencies": {
    "@nuxt/eslint": "^1.15.2",
    "@nuxt/hints": "^1.0.3",
    "@nuxt/test-utils": "^4.0.0"
  }
}

Step 5: Start Storefront

This should be enough to start the default ShopBite Storefront:

pnpm run build
node .output/server/index.mjs

For development, start the development server:

pnpm run dev

Next Steps