Vue / Nuxt 연동#
Vue 또는 Nuxt에서 ideal.house 브라우저 SDK를 직접 사용하고 자동 버튼 생성용 컨테이너를 반응형 상품 상태와 동기화하세요. 이 가이드에는 ideal.house Vue npm 패키지가 없습니다.
검증 상태: 현재 대시보드 템플릿과 SDK 마크업을 비교 확인했으며 2026년 9월 7일에 Vue 및 Nuxt 공식 문서를 검토했습니다. 고객 애플리케이션 또는 운영 인증 정보는 사용할 수 없었습니다.
SDK를 불러오기 전에: Dashboard → Settings를 열고 **Allowed Origins (CORS)**에 스토어 출처를 추가한 다음 저장을 클릭하세요. 배포된 호스트 이름과 사용 중인 미리보기 또는 스테이징 출처를 포함하고, 여러 출처는 쉼표로 구분하세요. 설정 절차를 참고하세요.
사전 준비 및 적용 경계#
Shop ID, Publishable Key, 가져온 SKU 및 반응형으로 관리되는 선택 상품 옵션 레코드를 준비하세요. Shop ID와 Publishable Key는 클라이언트에 표시될 수 있습니다. Client Secret, AI API 키 및 상품 가져오기 인증 정보는 서버에 보관하세요.
최소 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>
상품 코드는 카탈로그 sku와 정확히 같아야 합니다.
Vue 컴포넌트#
선택한 SKU가 바뀔 때 Vue가 새 노드를 생성하도록 컨테이너에 key를 지정하세요.
<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 또는 상품 페이지를 포함하는 레이아웃에 한 번 등록하세요.
<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 API는 클라이언트 측에서 실행해야 합니다.
상품 옵션 및 동적 탐색#
selectedVariant.sku를 컴포넌트에 바인딩하세요. 키가 지정된 노드는 문서화되지 않은 SDK 메서드 없이 옵션 변경을 처리합니다. 컴포넌트 인스턴스를 재사용하는 동안 Nuxt 경로 데이터가 바뀌면 계산된 코드가 갱신되고 이전 컨테이너가 제거됩니다.
상품 그리드에서는 각 카드에 항목별 SKU와 안정적인 Vue 키가 필요합니다. 무한 스크롤과 필터는 상태를 기반으로 새 컴포넌트를 렌더링해야 합니다. SDK가 이미 내용을 채운 DOM을 복사하지 마세요. 빠른 보기 서랍은 닫을 때 언마운트하고 새 상품에는 새 컴포넌트 키를 지정해야 합니다.
SSR과 하이드레이션이 동일한 SKU를 알 수 없다면 클라이언트 상품 상태가 준비될 때까지 버튼을 렌더링하지 않거나 페이지 데이터에 기준 SKU를 직렬화하세요. 렌더링된 옵션 텍스트에서만 SKU를 읽는 방식은 피하세요.
상품 데이터 가져오기#
각 상품 옵션의 기준 SKU를 ideal.house sku에 매핑하세요. 상품 업로드와 상품 가져오기, 작업 상태, 상품 목록 조회, 상품 수정, 상품 삭제, 오류와 재시도 가이드를 사용하세요.
백엔드 전자상거래 클라이언트, 웹훅, 예약 동기화 및 비공개 인증 정보는 브라우저 SDK 밖에서 관리하세요.
검증 및 제거#
SSR/하이드레이션, 강력 새로고침, 클라이언트 탐색, 브라우저 뒤로 가기/앞으로 가기, 모든 상품 옵션, 빈/알 수 없는 SKU, 반복 카드, 빠른 보기, <KeepAlive>, 로딩 상태, 모바일, 동의 및 운영 빌드를 테스트하세요. SDK 요청이 정확히 한 번 실행되고 DOM 상품 코드/SKU가 정확히 같은지 확인하세요. 빌드된 자산에 비밀 정보가 있는지 검사하세요.
제거하려면 useHead/루트 로더와 모든 버튼 컴포넌트를 삭제하고 공개 런타임 설정을 제거한 다음 다시 빌드하세요. SDK URL과 data-idealhouse-* 마크업이 없는지 검증하세요.