Ideal House
Pular para o conteúdo

Integração Vue / Nuxt#

Use o SDK do navegador ideal.house diretamente no Vue ou Nuxt e mantenha o container de botão gerado sincronizado com o estado reativo do produto. Não há pacote npm de ideal.house Vue neste guia.

Status de verificação: A marcação do SDK foi verificada contra o modelo atual do Dashboard; a documentação oficial do Vue e Nuxt foi revisada em 7 de setembro de 2026. Nenhuma aplicação de cliente ou credencial de produção estava disponível.

Antes de carregar o SDK: Abra Dashboard → Configurações, adicione a origem da sua loja ao campo Allowed Origins (CORS) e clique em Salvar. Inclua o nome de host publicado e quaisquer origens de preview ou staging que você usar; separe várias origens com vírgulas. Veja etapas de configuração.

Pré-requisitos e limites#

Prepare Shop ID, Publishable Key, um SKU importado e um registro de variante selecionada reativa. Shop ID e Publishable Key podem ser visíveis no cliente. Mantenha os Client Secrets, chaves AI API e credenciais de importação de produto no servidor.

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

O Product Code deve ser igual ao catálogo sku exatamente.

Componente Vue#

Dê ao container um key para que o Vue crie um nó limpo quando o SKU selecionado mudar:

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>

Passe o SKU da variante selecionada canônica. Renderize nada para uma seleção incompleta em vez de deixar o código anterior visível.

Carregador Nuxt#

O useHead do Nuxt suporta tags de script externas. Registre-o uma vez no app.vue ou em um layout que cubra páginas de produto:

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>

Configure apenas valores públicos sob runtimeConfig.public. Para o Vue puro, adicione o script uma vez ao HTML da aplicação ou crie-o no onMounted() do componente raiz com uma verificação de duplicata querySelector. As APIs do navegador DOM devem ser executadas no lado do cliente.

Variantes e navegação dinâmica#

Vincule selectedVariant.sku ao componente. O nó com chave lida com mudanças de opção sem um método de SDK não documentado. Quando os dados de rota do Nuxt mudam enquanto a instância do componente é reutilizada, o código calculado é atualizado e o container antigo é destruído.

Para grids de produto, cada card precisa de um SKU em nível de item e de uma chave Vue estável. Rolagem infinita e filtros devem renderizar novos componentes a partir do estado; nunca copie DOM que o SDK já tenha populado. Gavetas de visualização rápida devem ser desmontadas ao fechar, e um novo produto deve receber uma nova chave de componente.

Se o SSR e a hidratação não conhecerem o mesmo SKU, renderize nenhum botão até que o estado do produto do cliente esteja pronto, ou serialize o SKU canônico no payload da página. Evite ler um SKU apenas a partir do texto de opção renderizado.

Importar dados de produto#

Mapeie o SKU canônico de cada variante do comércio para ideal.house sku. Use Upload de produto e os guias para importar produtos, Status da tarefa, listar produtos, atualizar produtos, excluir produto e Erros e novas tentativas.

Seu cliente de comércio backend, webhooks, sincronização agendada e credenciais privadas permanecem fora do SDK do navegador.

Verificar e remover#

Teste SSR/hidratação, recarregamento rígido, navegação do cliente, botão Voltar/Avançar do navegador, cada variante, SKUs em branco/desconhecidos, cards repetidos, visualização rápida, <KeepAlive>, estados de carregamento, mobile, consentimento e uma build de produção. Confirme exatamente uma solicitação de SDK e igualdade exata do DOM Product Code/SKU. Inspecione os ativos construídos quanto a segredos.

Para remover, exclua o carregador useHead/raiz e todos os componentes de botão, remova a configuração de runtime pública, reconstrua e verifique se a marcação do SDK URL e data-idealhouse-* está ausente.

Referências oficiais do framework#