Integration von Vue / Nuxt#

Verwenden Sie die ideal.house-Browser-SDK direkt in Vue oder Nuxt und halten Sie den generierten Button-Container mit dem reaktiven Produktzustand synchron. In dieser Anleitung gibt es kein ideal.house Vue npm-Paket.

Verifizierungsstatus: Das SDK-Markup wurde mit der aktuellen Dashboard-Vorlage abgeglichen. Die offiziellen Dokumentationen von Vue und Nuxt wurden am 7. September 2026 geprüft. Es standen keine Kundenanwendung und keine Produktionszugangsdaten zur Verfügung.

Vor dem Laden des SDK: Öffnen Sie Dashboard → Einstellungen, fügen Sie den Origin Ihres Onlineshops zu Allowed Origins (CORS) hinzu und klicken Sie auf Speichern. Berücksichtigen Sie den veröffentlichten Hostnamen sowie alle verwendeten Vorschau- oder Staging-Origins; trennen Sie mehrere Origins durch Kommas. Siehe Konfigurationsschritte.

Voraussetzungen und Grenzen#

Bereiten Sie Shop ID, Publishable Key, eine importierte SKU und einen reaktiven Datensatz der ausgewählten Variante vor. Shop ID und Publishable Key dürfen clientseitig sichtbar sein. Bewahren Sie Client Secrets, AI API-Schlüssel und Zugangsdaten für den Produktimport auf dem Server auf.

Minimale SDK-Schnittstelle#

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Der Produktcode muss exakt mit dem Katalog-sku übereinstimmen.

Vue-Komponente#

Vergeben Sie dem Container einen key, damit Vue einen sauberen Knoten erstellt, wenn sich der ausgewählte SKU ändert:

vue

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{ productCode?: string | null }>()
const code = computed(() => props.productCode?.trim() || '')
</script>

<template>
  <div
    v-if="code"
    :key="code"
    data-idealhouse-button-container
    :data-product-code="code"
  />
</template>

Übergeben Sie den kanonischen ausgewählten Varianten-SKU. Rendern Sie bei unvollständiger Auswahl nichts, anstatt den vorherigen Code sichtbar zu lassen.

Ladeskript für Nuxt#

Das useHead von Nuxt unterstützt externe Skript-Tags. Registrieren Sie es einmalig in app.vue oder einem Layout, das Produktseiten abdeckt:

vue

<script setup lang="ts">
const config = useRuntimeConfig()

useHead({
  script: [
    {
      key: 'idealhouse-room-visualizer-sdk',
      src: 'https://sdk.ideal.house/sdk.js',
      async: true,
      'data-shop-id': config.public.idealhouseShopId,
      'data-publishable-key': config.public.idealhousePublishableKey,
    },
  ],
})
</script>

Konfigurieren Sie nur öffentliche Werte unter runtimeConfig.public. Für reines Vue fügen Sie das Skript einmalig in die Anwendungs-HTML ein oder erstellen Sie es in der onMounted() der Wurzelkomponente mit einer querySelector-Duplikatprüfung. Browser-DOM-APIs müssen clientseitig ausgeführt werden.

Binden Sie selectedVariant.sku an die Komponente. Der mit einem Schlüssel versehene Knoten verarbeitet Optionsänderungen ohne undokumentierte SDK-Methode. Ändern sich die Nuxt-Routendaten bei Wiederverwendung der Komponenteninstanz, wird der berechnete Code aktualisiert und der alte Container zerstört.

In Produktrastern benötigt jede Karte die SKU des jeweiligen Artikels und einen stabilen Vue-Schlüssel. Endloses Scrollen und Filter sollten neue Komponenten aus dem Zustand rendern. Kopieren Sie niemals DOM, das das SDK bereits befüllt hat. Schnellansichten sollten beim Schließen ausgehängt werden, und ein neues Produkt sollte einen neuen Komponentenschlüssel erhalten.

Falls SSR und Hydration nicht dieselbe SKU kennen, rendern Sie keine Schaltfläche, bis der clientseitige Produktzustand bereit ist, oder serialisieren Sie die kanonische SKU in den Seitendaten. Lesen Sie die SKU nicht ausschließlich aus gerendertem Optionstext.

Produktdaten importieren#

Mappen Sie den kanonischen SKU jeder Commerce-Variante auf ideal.house sku. Verwenden Sie Produktimport und die Anleitungen für Produkte importieren, Auftragsstatus, Produkte auflisten, Produkte aktualisieren, Produkt löschen und Fehler und Wiederholungsversuche.

Ihr Backend-Commerce-Client, Webhooks, geplante Synchronisierungen und private Zugangsdaten bleiben außerhalb des Browser-SDK.

Überprüfung und Entfernen#

Testen Sie SSR/Hydration, hartes Neuladen, Client-Navigation, Browser-Zurück/Weiter, jede Variante, leere/unkannte SKUs, wiederholte Karten, Quick-View, <KeepAlive>, Ladezustände, Mobile, Zustimmung und einen Produktions-Build. Bestätigen Sie genau eine SDK-Anfrage und die exakte Gleichheit von DOM Produktcode/SKU. Prüfen Sie die gebauten Assets auf Geheimnisse.

Zur Entfernung löschen Sie den useHead/Wurzel-Loader und alle Button-Komponenten, entfernen Sie die öffentliche Laufzeitkonfiguration, bauen Sie neu und stellen Sie sicher, dass die SDK URL und data-idealhouse-*-Markierung nicht vorhanden sind.