Nuxt 3

Nuxt 3 renderitza les pàgines al servidor per defecte. Els scripts CDN i els elements personalitzats s’han de carregar només al client. Un plugin client de Nuxt és el lloc més net per fer-ho.

@wink/elements npm package Instal·la i carrega el paquet CDN amb tipus TypeScript.

Instal·lar

npm install @wink/elements

Crear un plugin client

El sufix .client.ts indica a Nuxt que aquest plugin s’executi només al navegador:

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

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

Configurar la variable d’execució

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

Afegeix a .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Configurar Vue per a elements personalitzats

Afegeix l’opció isCustomElement al compilador perquè Vue no avisi dels tags desconeguts <wink-*>:

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

Ús en plantilles

Envolta els components Wink amb <ClientOnly> per evitar desajustos en la hidratació SSR:

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

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

Tipus TypeScript

Exten la interfície global HTMLElementTagNameMap (igual que Vue 3) per obtenir autocompletat d’atributs. Consulta la pàgina d’integració Vue 3 per al fitxer de declaració complet.