Nuxt 3

O Nuxt 3 renderiza páginas no servidor por padrão. Scripts CDN e elementos personalizados devem ser carregados apenas no lado do cliente. Um plugin cliente Nuxt é o local mais limpo para fazer isso.

@wink/elements npm package Instale e carregue o bundle CDN com tipos TypeScript.

Instalar

npm install @wink/elements

Criar um plugin cliente

O sufixo .client.ts indica ao Nuxt para executar este plugin apenas no navegador:

import { load } from '@wink/elements';

export default defineNuxtPlugin(() => {
  load({ clientId: useRuntimeConfig().public.winkClientId });
});

Configurar a variável de runtime

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      winkClientId: process.env.NUXT_PUBLIC_WINK_CLIENT_ID,
    },
  },
});

Adicione ao .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Configurar o Vue para elementos personalizados

Adicione a opção do compilador isCustomElement para que o Vue não alerte sobre tags desconhecidas <wink-*>:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('wink-'),
    },
  },
  runtimeConfig: {
    public: {
      winkClientId: process.env.NUXT_PUBLIC_WINK_CLIENT_ID,
    },
  },
});

Usar em templates

Envolva os componentes Wink em <ClientOnly> para evitar incompatibilidades de hidratação SSR:

<template>
  <main>
    <ClientOnly>
      <wink-content-loader layout="HOTEL" :id="layoutId" />
    </ClientOnly>
  </main>
</template>

<script setup lang="ts">
const layoutId = 'YOUR_LAYOUT_ID';
</script>

Tipos TypeScript

Estenda o HTMLElementTagNameMap global (igual ao Vue 3) para obter autocompletar de atributos. Veja a página de integração Vue 3 para o ficheiro de declaração completo.