Integratie met Vue / Nuxt#

Gebruik de browser-SDK van ideal.house rechtstreeks in Vue of Nuxt en houd de container voor de gegenereerde knop gesynchroniseerd met de reactieve producttoestand. Deze handleiding bevat geen ideal.house-Vue-npm-pakket.

Verificatiestatus: De SDK-markering is gecontroleerd aan de hand van het huidige dashboardsjabloon; de officiële documentatie van Vue en Nuxt is bekeken op 7 september 2026. Er was geen klanttoepassing of productietoegang beschikbaar.

Voordat je de SDK laadt: Open Dashboard → Instellingen, voeg de oorsprong van je webshop toe aan Allowed Origins (CORS) en klik op Opslaan. Neem de gepubliceerde hostnaam en alle gebruikte oorsprongen van voorbeeld- of testomgevingen op; scheid meerdere oorsprongen met komma's. Zie de configuratiestappen.

Vereisten en grenzen#

Zorg voor Shop ID, Publishable Key, een geïmporteerde SKU en een reactief record van de geselecteerde variant. Shop ID en Publishable Key mogen zichtbaar zijn op de client. Houd Client Secrets, AI API-sleutels en productimporttoegangsgegevens op de server.

Minimaal SDK-contract#

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>

De productcode moet exact gelijk zijn aan de catalogus-sku.

Component voor Vue#

Geef de container een key zodat Vue een schoon knooppunt aanmaakt wanneer de geselecteerde SKU verandert:

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>

Geef de canonieke SKU van de geselecteerde variant door. Geef niets weer bij een onvolledige selectie in plaats van de vorige code zichtbaar te laten.

Loader voor Nuxt#

De useHead van Nuxt ondersteunt externe scripttags. Registreer deze eenmaal in app.vue of een lay-out die de productpagina's omvat:

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>

Configureer onder runtimeConfig.public alleen openbare waarden. Voeg voor gewone Vue het script eenmaal toe aan de toepassings-HTML of maak het aan in onMounted() van het hoofdcomponent met een querySelector-duplicaatcontrole. Browser-DOM-API's moeten op de client worden uitgevoerd.

Varianten en dynamische navigatie#

Bind selectedVariant.sku aan het component. Het knooppunt met een sleutel handelt optiewijzigingen af zonder een ongedocumenteerde SDK-methode. Wanneer routegegevens van Nuxt veranderen terwijl de componentinstantie wordt hergebruikt, wordt de berekende code bijgewerkt en de oude container vernietigd.

Bij productrasters heeft elke kaart een eigen SKU en een stabiele Vue-sleutel nodig. Oneindig scrollen en filters moeten nieuwe componenten vanuit de toestand weergeven; kopieer nooit DOM die al door de SDK is gevuld. Snelweergavepanelen moeten bij sluiten hun component verwijderen en een nieuw product moet een nieuwe componentsleutel krijgen.

Als SSR en hydratatie niet dezelfde SKU kennen, geef dan geen knop weer totdat de producttoestand op de client gereed is, of serialiseer de canonieke SKU in de paginagegevens. Lees een SKU niet uitsluitend uit weergegeven optietekst.

Productgegevens importeren#

Koppel de canonieke SKU van elke webshopvariant aan ideal.house sku. Gebruik Producten uploaden en de handleidingen voor producten importeren, taakstatus, producten weergeven, producten bijwerken, product verwijderen en fouten en nieuwe pogingen.

Je backendwebshopclient, webhooks, geplande synchronisatie en privétoegangsgegevens blijven buiten de browser-SDK.

Controleren en verwijderen#

Test SSR/hydratatie, volledig herladen, clientnavigatie, de terug- en vooruitknoppen van de browser, elke variant, lege/onbekende SKUs, herhaalde kaarten, snelweergaven, <KeepAlive>, laadtoestanden, mobiel, toestemming en een productiebuild. Controleer precies één SDK-verzoek en exacte gelijkheid tussen de DOM-productcode en SKU. Inspecteer gebouwde bestanden op geheimen.

Verwijder de useHead-/hoofdloader en alle knopcomponenten, verwijder de openbare runtimeconfiguratie, bouw opnieuw en controleer dat de SDK-URL en data-idealhouse-*-markering verdwenen zijn.