Nuxt 3

A Nuxt 3 alapértelmezés szerint a szerveren rendereli az oldalakat. A CDN szkripteket és az egyedi elemeket csak kliensoldalon lehet betölteni. Egy Nuxt kliens plugin a legjobb hely erre.

@wink/elements npm csomag Telepítsd és töltsd be a CDN csomagot TypeScript típusokkal.

Telepítés

npm install @wink/elements

Kliens plugin létrehozása

A .client.ts kiterjesztés megmondja a Nuxt-nak, hogy ezt a plugint csak a böngészőben futtassa:

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

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

A futási idő változó konfigurálása

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

Add hozzá a .env fájlhoz:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Vue konfigurálása az egyedi elemekhez

Add hozzá az isCustomElement fordító opciót, hogy a Vue ne figyelmeztesse az ismeretlen <wink-*> tagekre:

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

Használat sablonokban

Csomagold be a Wink komponenseket <ClientOnly>-ba, hogy elkerüld az SSR hidratációs eltéréseket:

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

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

TypeScript típusok

Bővítsd a globális HTMLElementTagNameMap-et (ugyanaz, mint Vue 3-ban), hogy elérd az attribútumok automatikus kiegészítését. Lásd a Vue 3 integráció oldalát a teljes deklarációs fájlért.