Nuxt 3

Nuxt 3 рендерира страниците по подразбиране на сървъра. CDN скриптове и персонализирани елементи трябва да се зареждат само на клиента. Клиентският плъгин на Nuxt е най-чистото място за това.

@wink/elements npm пакет Инсталирайте и заредете CDN пакета с TypeScript типове.

Инсталиране

npm install @wink/elements

Създаване на клиентски плъгин

Суфиксът .client.ts казва на Nuxt да изпълнява този плъгин само в браузъра:

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

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

Конфигуриране на runtime променливата

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

Добавете в .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Конфигуриране на Vue за персонализирани елементи

Добавете опцията isCustomElement към компилатора, за да не предупреждава Vue за непознати тагове <wink-*>:

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

Използване в шаблони

Обградете 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 за пълния декларационен файл.