Nuxt 3

Nuxt 3 за замовчуванням рендерить сторінки на сервері. Скрипти CDN і кастомні елементи потрібно завантажувати лише на клієнті. Клієнтський плагін Nuxt — найчистіше місце для цього.

@wink/elements npm package Встановіть і завантажте CDN-бандл з типами TypeScript.

Встановлення

npm install @wink/elements

Створіть клієнтський плагін

Суфікс .client.ts вказує Nuxt запускати цей плагін лише в браузері:

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

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

Налаштуйте змінну часу виконання

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.