Nuxt 3

Nuxt 3 מציג דפים בשרת כברירת מחדל. סקריפטים מ-CDN ואלמנטים מותאמים אישית חייבים להיטען רק בצד הלקוח. תוסף לקוח של Nuxt הוא המקום הנקי ביותר לעשות זאת.

@wink/elements npm package התקן וטעין את חבילת ה-CDN עם טיפוסי TypeScript.

התקנה

npm install @wink/elements

צור תוסף לקוח

סיומת .client.ts אומרת ל-Nuxt להריץ את התוסף הזה רק בדפדפן:

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

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

הגדר את משתנה הריצה

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-*> לא מוכרות:

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>

טיפוסי TypeScript

הרחב את HTMLElementTagNameMap הגלובלי (כמו ב-Vue 3) כדי לקבל השלמת אוטומטית של מאפיינים. ראה את דף האינטגרציה של Vue 3 עבור קובץ ההצהרה המלא.