Nuxt 3

Nuxt 3 standardně vykresluje stránky na serveru. CDN skripty a vlastní elementy musí být načítány pouze na straně klienta. Nuxt klientský plugin je nejčistší místo, kde to provést.

@wink/elements npm balíček Nainstalujte a načtěte CDN balíček s typy pro TypeScript.

Instalace

npm install @wink/elements

Vytvoření klientského pluginu

Přípona .client.ts říká Nuxtu, aby tento plugin spustil pouze v prohlížeči:

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

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

Konfigurace runtime proměnné

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

Přidejte do .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurace Vue pro vlastní elementy

Přidejte volbu isCustomElement do kompilátoru, aby Vue nevypisovalo varování o neznámých značkách <wink-*>:

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

Použití v šablonách

Obalte Wink komponenty do <ClientOnly>, aby se zabránilo nesouladu při hydrataci 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 pro TypeScript

Rozšiřte globální HTMLElementTagNameMap (stejně jako ve Vue 3) pro automatické doplňování atributů. Kompletní deklaraci najdete na stránce Vue 3 integrace.