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:

pnpm add @shopbite-de/storefront

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";

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",
    "vue": "^3.5.26",
    "vue-router": "^4.6.4"
  }
}

Step 5: Start Storefront

This should be enough to start the default ShopBite Storefront:

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

Nuxt Development Environment

For development, you need additional packages:

pnpm add -D @nuxt/test-utils @nuxt/eslint

After that, you can start the development server:

pnpm run dev

Next Steps