Integrazione con Vue / Nuxt#
Usa direttamente SDK di ideal.house per browser in Vue o Nuxt e mantieni il contenitore del pulsante generato sincronizzato con lo stato reattivo del prodotto. Questa guida non prevede un pacchetto npm ideal.house per Vue.
Stato della verifica: il codice SDK è stato controllato rispetto al modello attuale del pannello di controllo; la documentazione ufficiale di Vue e Nuxt è stata esaminata il 7 settembre 2026. Non erano disponibili un'applicazione cliente né credenziali di produzione.
Prima di caricare SDK: apri Pannello di controllo → Impostazioni, aggiungi l’origine del negozio a Allowed Origins (CORS) e fai clic su Salva. Includi il nome host pubblicato e le origini di anteprima o preproduzione utilizzate; separa più origini con virgole. Consulta i passaggi di configurazione.
Prerequisiti e limiti#
Prepara Shop ID, Publishable Key, uno SKU importato e un record reattivo della variante selezionata. Shop ID e Publishable Key possono essere visibili al client. Conserva Client Secrets, chiavi AI API e credenziali per l'importazione dei prodotti sul server.
Contratto minimo di SDK#
<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>
Il Product Code deve essere esattamente uguale allo sku del catalogo.
Componente Vue#
Assegna una key al contenitore affinché Vue crei un nodo pulito quando cambia lo SKU selezionato:
<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>
Passa lo SKU canonico della variante selezionata. Non visualizzare nulla in caso di selezione incompleta, anziché lasciare visibile il codice precedente.
Caricatore Nuxt#
useHead di Nuxt supporta tag di script esterni. Registralo una sola volta in app.vue o in un layout che comprende le pagine prodotto:
<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>
Configura soltanto valori pubblici sotto runtimeConfig.public. Per Vue senza altri framework, aggiungi lo script una sola volta all'HTML dell'applicazione oppure crealo in onMounted() del componente radice con un controllo dei duplicati tramite querySelector. Le APIs DOM del browser devono essere eseguite sul client.
Varianti e navigazione dinamica#
Associa selectedVariant.sku al componente. Il nodo con chiave gestisce i cambiamenti delle opzioni senza un metodo SDK non documentato. Quando i dati del percorso Nuxt cambiano mentre l'istanza del componente viene riutilizzata, il codice calcolato si aggiorna e il vecchio contenitore viene distrutto.
Nelle griglie di prodotti, ogni scheda richiede uno SKU a livello di articolo e una chiave Vue stabile. Lo scorrimento infinito e i filtri devono generare nuovi componenti a partire dallo stato; non copiare mai il DOM già popolato da SDK. I pannelli di anteprima rapida devono essere smontati alla chiusura e un nuovo prodotto deve ricevere una nuova chiave del componente.
Se SSR e idratazione non conoscono lo stesso SKU, non visualizzare alcun pulsante finché lo stato del prodotto sul client non è pronto, oppure serializza lo SKU canonico nei dati della pagina. Evita di leggere uno SKU soltanto dal testo visualizzato delle opzioni.
Importare i dati dei prodotti#
Associa lo SKU canonico di ogni variante commerciale a sku di ideal.house. Usa Caricamento dei prodotti e le guide su importare prodotti, stato del processo, elencare prodotti, aggiornare prodotti, eliminare un prodotto ed errori e nuovi tentativi.
Il client commerciale del backend, i webhook, la sincronizzazione pianificata e le credenziali private restano al di fuori di SDK per browser.
Verificare e rimuovere#
Prova SSR/idratazione, ricaricamento completo, navigazione sul client, Indietro/Avanti del browser, ogni variante, SKUs vuoti/sconosciuti, schede ripetute, anteprima rapida, <KeepAlive>, stati di caricamento, dispositivi mobili, consenso e una compilazione di produzione. Verifica esattamente una richiesta SDK e l'uguaglianza esatta Product Code/SKU nel DOM. Esamina le risorse compilate per individuare eventuali segreti.
Per rimuovere l'integrazione, elimina useHead/il caricatore radice e tutti i componenti pulsante, rimuovi la configurazione pubblica di esecuzione, ricompila e verifica l'assenza della URL di SDK e del codice data-idealhouse-*.