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.