Nuxt 3

Ang Nuxt 3 ay nagre-render ng mga pahina sa server bilang default. Ang mga CDN script at custom elements ay kailangang i-load lamang sa client-side. Ang Nuxt client plugin ang pinakamalinis na lugar para gawin ito.

@wink/elements npm package I-install at i-load ang CDN bundle na may TypeScript types.

Install

npm install @wink/elements

Gumawa ng client plugin

Ang .client.ts suffix ay nagsasabi sa Nuxt na patakbuhin ang plugin na ito lamang sa browser:

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

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

I-configure ang runtime variable

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

Idagdag sa .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

I-configure ang Vue para sa custom elements

Idagdag ang isCustomElement compiler option para hindi magbigay ng warning ang Vue tungkol sa mga hindi kilalang <wink-*> tags:

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

Gamitin sa mga template

Balutin ang Wink components sa <ClientOnly> para maiwasan ang SSR hydration mismatches:

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

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

TypeScript types

Palawakin ang global HTMLElementTagNameMap (kapareho ng Vue 3) para makuha ang attribute autocompletion. Tingnan ang Vue 3 integration page para sa buong declaration file.