Ideal House
コンテンツにスキップ

Vue / Nuxt 連携#

Vue または Nuxt で ideal.house のブラウザー用 SDK を直接使用し、自動生成ボタンのコンテナをリアクティブな商品状態と同期させます。このガイドでは、ideal.house 専用の Vue npm パッケージは使用しません。

検証状況: SDK のマークアップは現在のダッシュボードのテンプレートと照合済みです。2026年9月7日 に Vue と Nuxt の公式ドキュメントを確認しました。顧客のアプリケーションや本番用の認証情報は利用できませんでした。

SDK を読み込む前に: ダッシュボード → 設定を開き、オンラインストアのオリジンを Allowed Origins (CORS) に追加して 保存 をクリックします。公開サイトのホスト名と、利用するプレビューまたはステージングのオリジンを含めます。複数のオリジンはカンマで区切ってください。設定手順を参照してください。

前提条件と対応範囲#

Shop ID、Publishable Key、インポート済みの SKU、リアクティブな選択中バリエーションのレコードを用意します。Shop ID と Publishable Key はクライアント側で公開できます。Client Secrets、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 コンポーネント#

選択した SKU が変わったときに Vue が新しいノードを作成するよう、コンテナに key を指定します。

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 のローダー#

Nuxt の useHead は外部スクリプトタグに対応しています。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 による重複チェックを行って作成します。ブラウザーの DOM 操作はクライアント側で実行する必要があります。

バリエーションと動的な画面遷移#

selectedVariant.sku をコンポーネントにバインドします。キーを持つノードが選択肢の変更を処理するため、ドキュメントにない SDK メソッドは必要ありません。コンポーネントのインスタンスが再利用されたまま Nuxt のルートデータが変わると、算出されたコードが更新され、古いコンテナが破棄されます。

商品グリッドでは、各カードに商品単位の SKU と安定した Vue のキーが必要です。無限スクロールやフィルターでは、状態から新しいコンポーネントを描画してください。SDK がすでに内容を追加した DOM をコピーしてはいけません。クイックビューのドロワーは閉じるときにアンマウントし、新しい商品には新しいコンポーネントのキーを指定します。

サーバー側レンダリングとハイドレーションで同じ SKU を把握できない場合は、クライアント側の商品状態が準備できるまでボタンを描画しないか、ページのペイロードに正規の SKU をシリアライズします。表示済みの選択肢のテキストだけから SKU を読み取る方法は避けてください。

商品データのインポート#

各商品バリエーションの正規の SKU を、ideal.house の sku に対応付けます。商品アップロードと、商品インポート、ジョブの状態、商品一覧、商品更新、商品削除、エラーと再試行のガイドを使用します。

バックエンドの EC クライアント、Webhook、定期同期、非公開の認証情報は、ブラウザー用 SDK の外で管理します。

検証と削除#

サーバー側レンダリングとハイドレーション、完全な再読み込み、クライアント側の画面遷移、ブラウザーの戻る・進む、すべてのバリエーション、空または不明な SKUs、同じ商品の複数カード、クイックビュー、<KeepAlive>、読み込み中の状態、モバイル、同意管理、本番ビルドをテストします。SDK のリクエストが一回だけで、DOM の商品コードと SKU が完全に一致することを確認します。ビルド済みのアセットにシークレットが含まれていないか調べてください。

削除するには、useHead またはルートのローダーとすべてのボタンコンポーネントを削除し、公開ランタイム設定を削除して再ビルドします。SDK の URL と data-idealhouse-* のマークアップが残っていないことを確認します。

フレームワークの公式リファレンス#