Nuxt 3

Nuxt 3 prema zadanim postavkama renderira stranice na serveru. CDN skripte i prilagođeni elementi moraju se učitavati samo na klijentskoj strani. Nuxt klijentski plugin je najčišće mjesto za to.

@wink/elements npm paket Instalirajte i učitajte CDN paket s TypeScript tipovima.

Instalacija

npm install @wink/elements

Kreirajte klijentski plugin

Sufiks .client.ts govori Nuxtu da ovaj plugin pokrene samo u pregledniku:

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

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

Konfigurirajte runtime varijablu

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

Dodajte u .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurirajte Vue za prilagođene elemente

Dodajte opciju isCustomElement u kompajler kako Vue ne bi upozoravao na nepoznate <wink-*> oznake:

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

Korištenje u predlošcima

Omotajte Wink komponente u <ClientOnly> kako biste spriječili neslaganja pri hidrataciji SSR-a:

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

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

TypeScript tipovi

Proširite globalni HTMLElementTagNameMap (isto kao u Vue 3) za automatsko dovršavanje atributa. Pogledajte stranicu integracije Vue 3 za punu deklaracijsku datoteku.