Nuxt 3

Nuxt 3 mặc định render trang trên server. Các script CDN và phần tử tùy chỉnh phải được tải chỉ trên client. Plugin client của Nuxt là nơi sạch sẽ nhất để làm điều này.

@wink/elements npm package Cài đặt và tải gói CDN kèm kiểu TypeScript.

Cài đặt

npm install @wink/elements

Tạo plugin client

Phần đuôi .client.ts báo cho Nuxt biết chỉ chạy plugin này trên trình duyệt:

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

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

Cấu hình biến runtime

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

Thêm vào .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Cấu hình Vue cho phần tử tùy chỉnh

Thêm tùy chọn isCustomElement cho trình biên dịch để Vue không cảnh báo về các thẻ <wink-*> không xác định:

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

Sử dụng trong template

Bao các thành phần Wink trong <ClientOnly> để tránh lỗi không khớp khi hydrate SSR:

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

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

Kiểu TypeScript

Mở rộng HTMLElementTagNameMap toàn cục (giống Vue 3) để có tự động hoàn thành thuộc tính. Xem trang tích hợp Vue 3 để biết file khai báo đầy đủ.