Intégration Vue / Nuxt#

Utilisez le SDK navigateur ideal.house directement dans Vue ou Nuxt et gardez son conteneur de bouton généré synchronisé avec l'état de produit réactif. Il n'y a pas de package npm ideal.house Vue dans ce guide.

Statut de vérification : le balisage du SDK a été vérifié par rapport au modèle actuel du tableau de bord ; la documentation officielle de Vue et Nuxt a été consultée le 7 septembre 2026. Aucune application client ni identifiants de production n'étaient disponibles.

Avant de charger le SDK : ouvrez Tableau de bord → Paramètres, ajoutez l'origine de votre boutique en ligne à Allowed Origins (CORS), puis cliquez sur Enregistrer. Incluez le nom d'hôte publié et toutes les origines d'aperçu ou de préproduction que vous utilisez ; séparez plusieurs origines par des virgules. Voir les étapes de configuration.

Prérequis et limites#

Préparez un Shop ID, une Publishable Key, un SKU importé, et un enregistrement de variante sélectionnée réactif. Le Shop ID et la Publishable Key peuvent être visibles côté client. Conservez les secrets clients, les clés AI API et les identifiants d'importation de produits sur le serveur.

Contrat minimal du SDK#

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>

Le code produit doit être exactement égal au sku du catalogue.

Composant Vue#

Donnez au conteneur une clé key afin que Vue crée un nœud propre lorsque le SKU sélectionné change :

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>

Transmettez le SKU canonique de la variante sélectionnée. Ne rendez rien pour une sélection incomplète au lieu de laisser le code précédent visible.

Chargeur Nuxt#

La fonction useHead de Nuxt prend en charge les balises de script externes. Enregistrez-le une seule fois dans app.vue ou une mise en page qui couvre les pages de produits :

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>

Configurez uniquement des valeurs publiques sous runtimeConfig.public. Pour le Vue pur, ajoutez le script une seule fois au shell de l'application HTML ou créez-le dans le onMounted() du composant racine avec une vérification de doublon par querySelector. Les API DOM du navigateur doivent s'exécuter côté client.

Liez selectedVariant.sku au composant. Le nœud doté d’une clé gère les changements d'options sans méthode non documentée du SDK. Lorsque les données de route de Nuxt changent pendant que l'instance du composant est réutilisée, le code calculé se met à jour et l'ancien conteneur est détruit.

Pour les grilles de produits, chaque carte a besoin d'un SKU au niveau de l'élément et d'une clé stable de Vue. Le défilement infini et les filtres doivent rendre de nouveaux composants depuis l'état ; ne copiez jamais le DOM que le SDK a déjà rempli. Les tiroirs d'aperçu rapide doivent se démonter à la fermeture, et un nouveau produit doit recevoir une nouvelle clé de composant.

Si le SSR et l'hydratation ne connaissent pas le même SKU, ne rendez aucun bouton jusqu'à ce que l'état de produit client soit prêt, ou sérialisez le SKU canonique dans la charge de page. Évitez de lire un SKU uniquement à partir du texte des options rendues.

Importer les données produit#

Mappez le SKU canonique de chaque variante de commerce vers le sku de ideal.house. Utilisez Téléversement de produits et les guides pour importer des produits, état de la tâche, liste des produits, mettre à jour les produits, supprimer un produit, et erreurs et nouvelles tentatives.

Votre client de commerce backend, webhooks, synchronisation planifiée et identifiants privés restent en dehors du SDK côté navigateur.

Vérifier et supprimer#

Testez le SSR/hydratation, le rechargement forcé, la navigation client, les boutons Retour/Avance du navigateur, chaque variante, les SKU vides/inconnus, les cartes répétées, l'aperçu rapide, <KeepAlive>, les états de chargement, le mobile, le consentement et une compilation de production. Confirmez exactement une requête SDK et l'égalité exacte du code produit DOM/SKU. Inspectez les ressources compilées pour les secrets.

Pour supprimer l'intégration, supprimez le chargeur useHead ou le chargeur racine et tous les composants de bouton, retirez la configuration publique d'exécution, recompilez, puis vérifiez que l'URL du SDK et le balisage data-idealhouse-* ont disparu.