Интеграция Vue / Nuxt#

Используйте браузерный SDK ideal.house непосредственно в Vue или Nuxt и поддерживайте синхронизацию его контейнера сгенерированной кнопки с реактивным состоянием товара. В этом руководстве нет пакета npm Vue ideal.house.

Статус проверки: Разметка SDK сверена с текущим шаблоном панели управления; официальная документация Vue и Nuxt проверена 7 сентября 2026 г. Приложение клиента и учётные данные рабочей среды были недоступны.

Перед загрузкой SDK: Откройте Панель управления → Настройки, добавьте источник вашего интернет-магазина в Allowed Origins (CORS) и нажмите Сохранить. Укажите опубликованное имя хоста, а также источники используемых сред предпросмотра и тестирования; разделяйте несколько источников запятыми. См. инструкцию по настройке.

Предварительные требования и границы#

Подготовьте Shop ID, Publishable Key, импортированный SKU и реактивную запись выбранного варианта. Shop ID и Publishable Key могут быть доступны в браузере. Храните Client Secret, ключи AI API и учётные данные импорта товаров на сервере.

Минимальные требования для подключения 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>

Код товара должен точно совпадать с sku в каталоге.

Компонент Vue#

Назначьте контейнеру key, чтобы Vue создавал чистый узел при изменении выбранного 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>

Передавайте канонический SKU выбранного варианта. Для неполного выбора не отображайте ничего, вместо того чтобы оставлять предыдущий код видимым.

Загрузчик Nuxt#

useHead в Nuxt поддерживает внешние теги скриптов. Зарегистрируйте его один раз в app.vue или в макете, охватывающем страницы товаров:

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>

Настройте только публичные значения в runtimeConfig.public. Для обычного Vue добавьте скрипт один раз в HTML приложения или создайте его в onMounted() корневого компонента с проверкой дубликатов через querySelector. Браузерные API DOM должны выполняться на стороне клиента.

Варианты и динамическая навигация#

Свяжите selectedVariant.sku с компонентом. Узел с ключом обрабатывает изменения опций без обращения к недокументированным методам SDK. Когда данные маршрута Nuxt меняются при повторном использовании экземпляра компонента, вычисляемый код обновляется, а старый контейнер удаляется.

В сетках товаров каждой карточке нужны собственный SKU и стабильный ключ Vue. При бесконечной прокрутке и фильтрации создавайте новые компоненты из состояния; не копируйте DOM, уже заполненный SDK. Выдвижные панели быстрого просмотра должны размонтироваться при закрытии, а новому товару нужно назначать новый ключ компонента.

Если SSR и гидратация не знают одного и того же SKU, не отображайте кнопку, пока клиентское состояние товара не будет готово, или сериализуйте канонический SKU в данных страницы. Избегайте чтения SKU только из отрендеренного текста вариантов.

Импорт данных товаров#

Сопоставьте канонический SKU каждого варианта товара с sku в ideal.house. Используйте загрузку товаров и руководства по импорту товаров, статусу задачи, получению списка товаров, обновлению товаров, удалению товара и ошибкам и повторным попыткам.

Серверный клиент платформы электронной коммерции, вебхуки, синхронизация по расписанию и секретные учётные данные остаются за пределами браузерного SDK.

Проверка и удаление#

Проверьте SSR и гидратацию, полную перезагрузку страницы, навигацию на стороне клиента, кнопки браузера «Назад» и «Вперёд», каждый вариант, пустые и неизвестные SKU, повторяющиеся карточки, быстрый просмотр, <KeepAlive>, состояния загрузки, мобильную версию, согласие и сборку для рабочей среды. Убедитесь, что выполняется ровно один запрос SDK, а код товара в DOM точно совпадает с SKU. Проверьте собранные ресурсы на наличие секретных данных.

Для удаления удалите загрузчик useHead/корня и все компоненты кнопок, удалите публичную конфигурацию времени выполнения, пересоберите и убедитесь, что SDK URL и разметка data-idealhouse-* отсутствуют.