Nuxt 3

Nuxt 3 rendert pagina’s standaard op de server. CDN-scripts en custom elements moeten alleen client-side geladen worden. Een Nuxt client plugin is de schoonste plek om dit te doen.

@wink/elements npm package Installeer en laad de CDN-bundel met TypeScript-typen.

Installeren

npm install @wink/elements

Maak een client plugin aan

De .client.ts suffix vertelt Nuxt om deze plugin alleen in de browser uit te voeren:

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

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

Configureer de runtime variabele

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

Voeg toe aan .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Configureer Vue voor custom elements

Voeg de isCustomElement compileroptie toe zodat Vue geen waarschuwingen geeft over onbekende <wink-*> tags:

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

Gebruik in templates

Wikkel Wink-componenten in <ClientOnly> om SSR hydration mismatches te voorkomen:

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

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

TypeScript-typen

Breid de globale HTMLElementTagNameMap uit (zoals in Vue 3) om autocompletion van attributen te krijgen. Zie de Vue 3 integratiepagina voor het volledige declaratiebestand.