Integración de Vue / Nuxt#

Usa el SDK del navegador de ideal.house directamente en Vue o Nuxt y mantén sincronizado su contenedor del botón generado con el estado reactivo del producto. No hay paquete npm de Vue ideal.house separado en esta guía.

Estado de verificación: Se verificó el marcado SDK contra la plantilla actual del Panel de control; se revisó la documentación oficial de Vue y Nuxt el 7 de septiembre de 2026. No había credenciales de aplicación de cliente ni producción disponibles.

Antes de cargar el SDK: abre Panel de control → Configuración, añade tu origen de tienda en línea a Allowed Origins (CORS) y haz clic en Save. Incluye el hostname publicado y cualquier origen de vista previa o staging que utilices; separa varios orígenes con comas. Consulta pasos de configuración.

Requisitos previos y límites#

Prepare Shop ID, Publishable Key, un SKU importado y un registro reactivo de variante seleccionada. El Shop ID y el Publishable Key pueden ser visibles en el cliente. Mantenga los Client Secrets, las claves AI API y las credenciales de importación de productos en el servidor.

Contrato mínimo del 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>

El Product Code debe ser exactamente igual al sku del catálogo.

Componente de Vue#

Asigna un key al contenedor para que Vue cree un nodo limpio cuando cambie el seleccionado SKU:

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>

Pasa el SKU de la variante seleccionada canónica. Renderiza nada para una selección incompleta en lugar de dejar visible el código previo.

Cargador de Nuxt#

La API de useHead de Nuxt admite etiquetas de script externas. Regístrala una vez en app.vue o en un diseño que cubra las páginas de producto:

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>

Configura solo valores públicos bajo runtimeConfig.public. Para Vue plano, agrega el script una vez a la plantilla HTML de la aplicación o créalo en el onMounted() del componente raíz con una verificación de duplicados por querySelector. Las APIs del DOM del navegador deben ejecutarse en el cliente.

Variantes y navegación dinámica#

Vincula selectedVariant.sku al componente. El nodo con clave maneja los cambios de opción sin necesidad de un método del SDK no documentado. Cuando los datos de ruta de Nuxt cambian mientras la instancia del componente se reutiliza, el código calculado se actualiza y el contenedor anterior se destruye.

Para cuadrículas de productos, cada tarjeta necesita un SKU a nivel de elemento y una clave estable de Vue. El scroll infinito y los filtros deben renderizar nuevos componentes a partir del estado; nunca copies marcado del DOM que el SDK ya haya poblado. Los cajones de vista rápida deben desmontarse al cerrarse, y un producto nuevo debe recibir una nueva clave de componente.

Si el SSR y la hidratación no conocen el mismo SKU, no renderices ningún botón hasta que el estado del producto del cliente esté listo, o serializa el SKU canónico en el payload de la página. Evita leer un SKU solo a partir del texto de opción renderizado.

Importar datos del producto#

Mapea el SKU canónico de cada variante de comercio al sku de ideal.house. Usa Carga de productos y las guías para importar productos, estado del trabajo, listar productos, actualizar productos, eliminar producto y errores y reintentos.

Tu cliente de comercio del backend, webhooks, sincronización programada y credenciales privadas permanecen fuera del SDK del navegador.

Verificar y eliminar#

Prueba SSR/hidratación, recarga dura, navegación del cliente, Atrás/Adelante del navegador, cada variante, SKUs en blanco/desconocidos, tarjetas repetidas, vista rápida, <KeepAlive>, estados de carga, móvil, consentimiento y una compilación de producción. Confirma exactamente una solicitud del SDK y la igualdad exacta del Product Code/SKU del DOM. Inspecciona los activos compilados en busca de secretos.

Para eliminar, borra el cargador/root de useHead y todos los componentes de botón, elimina la configuración de ejecución pública, vuelve a compilar y verifica que el marcado del SDK de URL y data-idealhouse-* esté ausente.