Nuxt 3

Nuxt 3 rendert Seiten standardmäßig auf dem Server. CDN-Skripte und benutzerdefinierte Elemente müssen nur clientseitig geladen werden. Ein Nuxt-Client-Plugin ist der sauberste Ort, um dies zu tun.

@wink/elements npm package Installieren und laden Sie das CDN-Bundle mit TypeScript-Typen.

Installation

npm install @wink/elements

Erstellen Sie ein Client-Plugin

Die Endung .client.ts teilt Nuxt mit, dieses Plugin nur im Browser auszuführen:

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

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

Konfigurieren Sie die Laufzeitvariable

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

Fügen Sie in .env hinzu:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurieren Sie Vue für benutzerdefinierte Elemente

Fügen Sie die Compiler-Option isCustomElement hinzu, damit Vue keine Warnungen über unbekannte <wink-*>-Tags ausgibt:

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

Verwendung in Templates

Umwickeln Sie Wink-Komponenten mit <ClientOnly>, um SSR-Hydrationsfehler zu vermeiden:

<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

Erweitern Sie die globale HTMLElementTagNameMap (wie in Vue 3), um Attribut-Autovervollständigung zu erhalten. Siehe die Vue 3 Integrationsseite für die vollständige Deklarationsdatei.