Nuxt 3

Nuxt 3 štandardne renderuje stránky na serveri. CDN skripty a vlastné elementy musia byť načítané iba na strane klienta. Nuxt klientsky plugin je najčistejšie miesto, kde to urobiť.

@wink/elements npm balík Nainštalujte a načítajte CDN balík s typmi pre TypeScript.

Inštalácia

npm install @wink/elements

Vytvorte klientsky plugin

Prípona .client.ts hovorí Nuxtu, aby tento plugin spustil iba v prehliadači:

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

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

Konfigurácia runtime premennej

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

Pridajte do .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurácia Vue pre vlastné elementy

Pridajte kompilátorovú možnosť isCustomElement, aby Vue nevydával varovanie o neznámych tagoch <wink-*>:

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

Použitie v šablónach

Obalte Wink komponenty do <ClientOnly>, aby ste predišli nezhodám hydratácie SSR:

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

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

Typy pre TypeScript

Rozšírte globálnu mapu HTMLElementTagNameMap (rovnaké ako vo Vue 3) pre automatické dopĺňanie atribútov. Pozrite si stránku integrácie Vue 3 pre kompletný deklaratívny súbor.