Nuxt 3

Το Nuxt 3 αποδίδει σελίδες στον διακομιστή από προεπιλογή. Τα σενάρια CDN και τα προσαρμοσμένα στοιχεία πρέπει να φορτώνονται μόνο από την πλευρά του πελάτη. Ένα plugin πελάτη Nuxt είναι ο πιο καθαρός τρόπος για να το κάνετε αυτό.

@wink/elements npm package Εγκαταστήστε και φορτώστε το πακέτο CDN με τύπους TypeScript.

Εγκατάσταση

npm install @wink/elements

Δημιουργία plugin πελάτη

Η κατάληξη .client.ts λέει στο Nuxt να τρέξει αυτό το plugin μόνο στον περιηγητή:

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 για προσαρμοσμένα στοιχεία

Προσθέστε την επιλογή compiler isCustomElement ώστε το Vue να μην εμφανίζει προειδοποιήσεις για άγνωστες ετικέτες <wink-*>:

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

Χρήση σε πρότυπα

Τυλίξτε τα components του 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 για το πλήρες αρχείο δήλωσης.