Nuxt 3

Nuxt 3 डिफ़ॉल्ट रूप से सर्वर पर पेज रेंडर करता है। CDN स्क्रिप्ट और कस्टम एलिमेंट्स केवल क्लाइंट-साइड पर लोड किए जाने चाहिए। Nuxt क्लाइंट प्लगइन इसे करने के लिए सबसे साफ़ जगह है।

@wink/elements npm package TypeScript टाइप्स के साथ CDN बंडल इंस्टॉल और लोड करें।

इंस्टॉल करें

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,
    },
  },
});

टेम्पलेट्स में उपयोग करें

SSR हाइड्रेशन असंगतताओं को रोकने के लिए Wink कंपोनेंट्स को <ClientOnly> में लपेटें:

<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 इंटीग्रेशन पेज देखें।