Nuxt 3

يقوم Nuxt 3 بعرض الصفحات على الخادم بشكل افتراضي. يجب تحميل سكربتات CDN والعناصر المخصصة على جانب العميل فقط. إضافة عميل Nuxt هي أنظف مكان للقيام بذلك.

@wink/elements npm package قم بتثبيت وتحميل حزمة CDN مع أنواع TypeScript.

التثبيت

npm install @wink/elements

إنشاء إضافة عميل

اللاحقة .client.ts تخبر Nuxt بتشغيل هذه الإضافة فقط في المتصفح:

plugins/wink.client.ts

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

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

تكوين متغير وقت التشغيل

nuxt.config.ts

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

أضف إلى .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

تكوين Vue للعناصر المخصصة

أضف خيار المترجم isCustomElement حتى لا يحذر Vue من علامات <wink-*> غير المعروفة:

nuxt.config.ts

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

الاستخدام في القوالب

غلف مكونات Wink بـ <ClientOnly> لمنع عدم تطابق التهيئة في SSR:

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

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

نصيحة

يقوم <ClientOnly> بعرض عنصر نائب على الخادم ويثبت العنصر الحقيقي على العميل — هذا هو النمط الموصى به لجميع تضمينات الطرف الثالث التي تعمل فقط في المتصفح في Nuxt.

أنواع TypeScript

قم بتمديد HTMLElementTagNameMap العالمية (نفس Vue 3) للحصول على إكمال تلقائي للسمات. راجع صفحة تكامل Vue 3 لملف التصريح الكامل.

قراءة إضافية

• مرجع مكونات الويب
• حزمة npm @wink/elements
• تكامل Vue 3