Nuxt 3

Nuxt 3 rende le pagine sul server di default. Gli script CDN e gli elementi personalizzati devono essere caricati solo client-side. Un plugin client di Nuxt è il modo più pulito per farlo.

@wink/elements npm package Installa e carica il bundle CDN con i tipi TypeScript.

Installazione

npm install @wink/elements

Crea un plugin client

Il suffisso .client.ts indica a Nuxt di eseguire questo plugin solo nel browser:

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

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

Configura la variabile runtime

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

Aggiungi a .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Configura Vue per gli elementi personalizzati

Aggiungi l’opzione isCustomElement al compilatore così Vue non mostra avvisi per i tag sconosciuti <wink-*>:

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

Uso nei template

Racchiudi i componenti Wink in <ClientOnly> per evitare discrepanze di idratazione SSR:

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

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

Tipi TypeScript

Estendi la mappa globale HTMLElementTagNameMap (come in Vue 3) per avere l’autocompletamento degli attributi. Vedi la pagina di integrazione Vue 3 per il file di dichiarazione completo.