Nuxt 3

Nuxt 3 redă paginile pe server în mod implicit. Scripturile CDN și elementele personalizate trebuie încărcate doar pe client. Un plugin client Nuxt este cel mai curat loc pentru a face acest lucru.

@wink/elements npm package Instalează și încarcă pachetul CDN cu tipuri TypeScript.

Instalare

npm install @wink/elements

Creează un plugin client

Sufixul .client.ts indică lui Nuxt să ruleze acest plugin doar în browser:

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

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

Configurează variabila de runtime

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

Adaugă în .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Configurează Vue pentru elemente personalizate

Adaugă opțiunea isCustomElement în compiler pentru ca Vue să nu afișeze avertismente despre taguri necunoscute <wink-*>:

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

Utilizare în template-uri

Încapsulează componentele Wink în <ClientOnly> pentru a preveni nepotriviri la hidratarea SSR:

<template>
  <main>
    <ClientOnly>
      <wink-content-loader layout="HOTEL" :id="layoutId" />
    </ClientOnly>
  </main>
</template>

<script setup lang="ts">
const layoutId = 'YOUR_LAYOUT_ID';
</script>

Tipuri TypeScript

Extinde HTMLElementTagNameMap global (la fel ca în Vue 3) pentru a beneficia de completarea automată a atributelor. Vezi pagina de integrare Vue 3 pentru fișierul complet de declarații.