Nuxt 3

Nuxt 3 génère les pages côté serveur par défaut. Les scripts CDN et les éléments personnalisés doivent être chargés uniquement côté client. Un plugin client Nuxt est l’endroit le plus propre pour le faire.

@wink/elements npm package Installez et chargez le bundle CDN avec les types TypeScript.

Installation

npm install @wink/elements

Créez un plugin client

Le suffixe .client.ts indique à Nuxt d’exécuter ce plugin uniquement dans le navigateur :

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

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

Configurez la variable d’exécution

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

Ajoutez dans .env :

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Configurez Vue pour les éléments personnalisés

Ajoutez l’option isCustomElement au compilateur pour que Vue ne génère pas d’avertissement sur les balises inconnues <wink-*> :

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

Utilisation dans les templates

Encapsulez les composants Wink dans <ClientOnly> pour éviter les erreurs d’hydratation SSR :

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

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

Types TypeScript

Étendez le HTMLElementTagNameMap global (comme dans Vue 3) pour bénéficier de l’autocomplétion des attributs. Consultez la page d’intégration Vue 3 pour le fichier de déclaration complet.