Nuxt 3

Nuxt 3 sayfaları varsayılan olarak sunucuda render eder. CDN scriptleri ve özel elementler yalnızca istemci tarafında yüklenmelidir. Bunu yapmak için en temiz yer bir Nuxt istemci eklentisidir.

@wink/elements npm paketi CDN paketini TypeScript tipleriyle birlikte yükleyin ve kurun.

Kurulum

npm install @wink/elements

İstemci eklentisi oluşturun

.client.ts eki, Nuxt’a bu eklentiyi yalnızca tarayıcıda çalıştırmasını söyler:

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

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

Çalışma zamanı değişkenini yapılandırın

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

.env dosyasına ekleyin:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Vue’yu özel elementler için yapılandırın

Vue’nun bilinmeyen <wink-*> etiketleri hakkında uyarı vermemesi için isCustomElement derleyici seçeneğini ekleyin:

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

Şablonlarda kullanımı

SSR hidratasyon uyumsuzluklarını önlemek için Wink bileşenlerini <ClientOnly> ile sarın:

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

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

TypeScript tipleri

Öznitelik otomatik tamamlama için global HTMLElementTagNameMap’i (Vue 3 ile aynı) genişletin. Tam bildirim dosyası için Vue 3 entegrasyon sayfasına bakın.