Nuxt 3

Nuxt 3 domyślnie renderuje strony po stronie serwera. Skrypty CDN i niestandardowe elementy muszą być ładowane wyłącznie po stronie klienta. Wtyczka klienta Nuxt to najczystsze miejsce, aby to zrobić.

@wink/elements npm package Zainstaluj i załaduj pakiet CDN z typami TypeScript.

Instalacja

npm install @wink/elements

Utwórz wtyczkę klienta

Sufiks .client.ts mówi Nuxt, aby uruchomił tę wtyczkę tylko w przeglądarce:

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

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

Skonfiguruj zmienną runtime

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

Dodaj do .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Skonfiguruj Vue dla niestandardowych elementów

Dodaj opcję kompilatora isCustomElement, aby Vue nie wyświetlało ostrzeżeń o nieznanych tagach <wink-*>:

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

Użycie w szablonach

Opakuj komponenty Wink w <ClientOnly>, aby zapobiec niezgodnościom hydratacji 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 TypeScript

Rozszerz globalny HTMLElementTagNameMap (tak jak w Vue 3), aby uzyskać autouzupełnianie atrybutów. Zobacz stronę integracji Vue 3 dla pełnego pliku deklaracji.