Nuxt 3

Nuxt 3 pagal numatytuosius nustatymus puslapius atvaizduoja serveryje. CDN scenarijai ir pasirinktinių elementų reikia įkelti tik kliento pusėje. Nuxt kliento papildinys yra švariausia vieta tai padaryti.

@wink/elements npm package Įdiekite ir įkelkite CDN paketą su TypeScript tipais.

Įdiegimas

npm install @wink/elements

Sukurkite kliento papildinį

.client.ts priesaga nurodo Nuxt vykdyti šį papildinį tik naršyklėje:

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

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

Konfigūruokite vykdymo laikotarpio kintamąjį

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

Pridėkite į .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigūruokite Vue pasirinktiniams elementams

Pridėkite isCustomElement kompiliatoriaus parinktį, kad Vue nerodytų įspėjimų apie nežinomus <wink-*> žymenis:

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

Naudojimas šablonuose

Apvyniokite Wink komponentus <ClientOnly>, kad išvengtumėte SSR hidratacijos neatitikimų:

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

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

TypeScript tipai

Išplėskite globalų HTMLElementTagNameMap (kaip ir Vue 3), kad gautumėte atributų automatinį pildymą. Visą deklaracijos failą žr. Vue 3 integracijos puslapyje.