Nuxt 3

Nuxt 3 privzeto upodablja strani na strežniku. CDN skripte in prilagojeni elementi morajo biti naloženi samo na strani odjemalca. Nuxt vtičnik na strani odjemalca je najčistejši način za to.

@wink/elements npm package Namestite in naložite CDN paket z TypeScript tipi.

Namestitev

npm install @wink/elements

Ustvarite vtičnik na strani odjemalca

Pripona .client.ts pove Nuxtu, da ta vtičnik zažene samo v brskalniku:

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

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

Konfigurirajte runtime spremenljivko

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

Dodajte v .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurirajte Vue za prilagojene elemente

Dodajte možnost isCustomElement v prevajalnik, da Vue ne opozarja na neznane oznake <wink-*>:

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

Uporaba v predlogah

Obkrožite Wink komponente z <ClientOnly>, da preprečite neusklajenost hidracije 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 tipi

Razširite globalni HTMLElementTagNameMap (enako kot v Vue 3), da dobite samodejno dokončanje atributov. Celotno datoteko deklaracije si oglejte na strani Vue 3 integracije.