Nuxt 3

Nuxt 3 renderiza las páginas en el servidor por defecto. Los scripts CDN y los elementos personalizados deben cargarse solo del lado del cliente. Un plugin cliente de Nuxt es el lugar más limpio para hacer esto.

@wink/elements npm package Instala y carga el paquete CDN con tipos para TypeScript.

Instalar

npm install @wink/elements

Crear un plugin cliente

El sufijo .client.ts indica a Nuxt que ejecute este plugin solo en el navegador:

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

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

Configurar la variable en tiempo de ejecución

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

Agrega a .env:

NUXT_PUBLIC_WINK_CLIENT_ID=tu-client-id

Configurar Vue para elementos personalizados

Agrega la opción isCustomElement al compilador para que Vue no muestre advertencias sobre etiquetas desconocidas <wink-*>:

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

Uso en plantillas

Envuelve los componentes Wink en <ClientOnly> para evitar desajustes de hidratación 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 para TypeScript

Extiende el HTMLElementTagNameMap global (igual que en Vue 3) para obtener autocompletado de atributos. Consulta la página de integración con Vue 3 para el archivo de declaración completo.