Documentation

Erste Schritte mit der ShopBite Storefront

Herzlichen Glückwunsch zur Installation Ihrer ShopBite Storefront! Diese Anleitung führt Sie durch die ersten Schritte.

Vorbereitende Schritte

Stellen Sie sicher, dass folgende Voraussetzungen erfüllt sind:

  • Shopware 6 ist installiert und funktionsfähig
  • Sie verfügen über eine Domain für Ihre Storefront

Shopware Vorbereiten

  1. Verkaufskanal erstellen:
    • Erstellen Sie einen Storefront Verkaufskanal in Shopware
    • Alternativ können Sie einen vorhandenen Verkaufskanal verwenden
    • Weitere Informationen: Storefront vs. Headless
  2. Domain-Konfiguration:
    • Binden Sie Ihre Domain an den Verkaufskanal
    • Stellen Sie sicher, dass alle Konfigurationen abgeschlossen sind

Nuxt installieren

Eine detaillierte Anleitung zur Nuxt-Installation finden Sie in der offiziellen Nuxt Dokumentation.

Schritt 1: Nuxt-Projekt erstellen

Führen Sie den folgenden Befehl aus und navigieren Sie durch die Fragen. Wählen Sie die Standard-Einstellungen, um eine neue Nuxt-Anwendung zu erstellen:

pnpm create nuxt@latest

Schritt 2: ShopBite Storefront-Modul installieren

Installieren Sie das ShopBite Storefront-Modul:

pnpm add @shopbite-de/storefront

Schritt 3: Konfigurationsdateien erstellen

Erstellen Sie die folgenden Dateien mit den entsprechenden Inhalten:

.env Datei:

# .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 Datei:

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

app/assets/css/main.css Datei:

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

Schritt 4: package.json aktualisieren

Ihre package.json sollte ungefähr so aussehen:

{
  "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"
  }
}

Schritt 5: Storefront starten

Das sollte ausreichen, um den Standard-ShopBite Storefront zu starten:

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

Nuxt-Entwicklungsumgebung

Für die Entwicklung benötigen Sie zusätzliche Pakete:

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

Danach können Sie den Entwicklungsserver starten:

pnpm run dev

Nächste Schritte