Nuxt 3

Nuxt 3 pēc noklusējuma renderē lapas serverī. CDN skripti un pielāgotie elementi jāielādē tikai klienta pusē. Nuxt klienta spraudnis ir tīrākais veids, kā to izdarīt.

@wink/elements npm package Instalējiet un ielādējiet CDN pakotni ar TypeScript tipiem.

Instalēšana

npm install @wink/elements

Izveidojiet klienta spraudni

Pielikums .client.ts norāda Nuxt, ka šo spraudni jāizpilda tikai pārlūkprogrammā:

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

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

Konfigurējiet izpildlaika mainīgo

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

Pievienojiet .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurējiet Vue pielāgotajiem elementiem

Pievienojiet isCustomElement kompilatora opciju, lai Vue nebrīdinātu par nezināmiem <wink-*> tagiem:

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

Lietošana veidnēs

Ietiniet Wink komponentus <ClientOnly>, lai novērstu SSR hidratācijas neatbilstības:

<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

Paplašiniet globālo HTMLElementTagNameMap (tāpat kā Vue 3), lai iegūtu atribūtu automātisko pabeigšanu. Pilnu deklarācijas failu skatiet Vue 3 integrācijas lapā.