Nuxt 3

Nuxt 3 memaparkan halaman di pelayan secara lalai. Skrip CDN dan elemen tersuai mesti dimuatkan hanya di sisi klien. Plugin klien Nuxt adalah tempat paling kemas untuk melakukan ini.

@wink/elements npm package Pasang dan muatkan bundel CDN dengan jenis TypeScript.

Pasang

npm install @wink/elements

Buat plugin klien

Suffix .client.ts memberitahu Nuxt untuk menjalankan plugin ini hanya di pelayar:

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

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

Konfigurasikan pembolehubah runtime

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

Tambah ke .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurasikan Vue untuk elemen tersuai

Tambah pilihan penyusun isCustomElement supaya Vue tidak memberi amaran tentang tag <wink-*> yang tidak dikenali:

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

Gunakan dalam templat

Balut komponen Wink dalam <ClientOnly> untuk mengelakkan ketidakpadanan hidrasi SSR:

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

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

Jenis TypeScript

Kembangkan HTMLElementTagNameMap global (sama seperti Vue 3) untuk mendapatkan autolengkap atribut. Lihat halaman integrasi Vue 3 untuk fail deklarasi penuh.