Nuxt 3

Nuxt 3 renderar síður á þjóninum sjálfgefið. CDN skriptur og sérsniðin þættir verða að hlaðast aðeins á viðskiptavinahlið. Nuxt viðskiptavinaviðbót er hreinskilnasta staðsetningin til að gera þetta.

@wink/elements npm package Settu upp og hlaðaðu CDN pakkanum með TypeScript týpum.

Setja upp

npm install @wink/elements

Búa til viðskiptavinaviðbót

Viðskeytið .client.ts segir Nuxt að keyra þessa viðbót aðeins í vafranum:

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

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

Stilltu keyrslubreytu

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

Bættu við í .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Stilltu Vue fyrir sérsniðna þætti

Bættu við isCustomElement þýðanda valkostinum svo Vue varar ekki við óþekktum <wink-*> merkjum:

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

Nota í sniðmátum

Pakktu Wink þáttum inn í <ClientOnly> til að koma í veg fyrir ósamræmi í SSR hydrerun:

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

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

TypeScript týpur

Framlengdu alþjóðlega HTMLElementTagNameMap (eins og í Vue 3) til að fá sjálfvirka útfyllingu á eiginleikum. Sjáðu Vue 3 samþættingarsíðu fyrir fulla yfirlýsingu.