Nuxt 3

Nuxt 3 renderdab lehti vaikimisi serveris. CDN skriptid ja kohandatud elemendid tuleb laadida ainult kliendipoolselt. Nuxt kliendipoolne plugin on selleks kõige puhtam koht.

@wink/elements npm package Paigalda ja laadi CDN pakett koos TypeScripti tüüpidega.

Paigalda

npm install @wink/elements

Loo kliendipoolne plugin

Lõpp .client.ts ütleb Nuxtile, et see plugin käivitatakse ainult brauseris:

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

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

Konfigureeri runtime muutuja

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

Lisa .env faili:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigureeri Vue kohandatud elementide jaoks

Lisa isCustomElement kompilaatori valik, et Vue ei hoiaks tundmatute <wink-*> siltide pärast:

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

Kasutamine mallides

Paki Wink komponendid <ClientOnly> sisse, et vältida SSR hüdreerimise ebakõlasid:

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

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

TypeScripti tüübid

Laienda globaali HTMLElementTagNameMap (nagu Vue 3-s), et saada atribuutide automaatne täitmine. Täieliku deklaratsioonifaili leiad Vue 3 integratsiooni lehelt.