Nuxt 3

Nuxt 3 renderöi sivut oletuksena palvelimella. CDN-skriptit ja mukautetut elementit on ladattava vain client-puolella. Nuxtin client-plugin on siistein tapa tehdä tämä.

@wink/elements npm package Asenna ja lataa CDN-kimppu TypeScript-tyypeillä.

Asennus

npm install @wink/elements

Luo client-plugin

.client.ts-päätteellä kerrotaan Nuxtille, että tämä plugin suoritetaan vain selaimessa:

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

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

Määritä runtime-muuttuja

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

Lisää .env-tiedostoon:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Määritä Vue mukautetuille elementeille

Lisää isCustomElement-kääntäjäoptio, jotta Vue ei varoita tuntemattomista <wink-*>-tageista:

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

Käyttö malleissa

Kääri Wink-komponentit <ClientOnly>-elementtiin estääksesi SSR:n ja clientin hydratisointivirheet:

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

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

TypeScript-tyypit

Laajenna globaalia HTMLElementTagNameMap-tyyppiä (kuten Vue 3:ssa) saadaksesi attribuuttien automaattisen täydennyksen. Katso Vue 3 -integraatiosivu täydellisestä määrittelytiedostosta.