Nuxt 3

Deze inhoud is nog niet vertaald.

Nuxt 3 renders pages on the server by default. CDN scripts and custom elements must be loaded client-side only. A Nuxt client plugin is the cleanest place to do this.

@wink/elements npm package Install and load the CDN bundle with TypeScript types.

Install

npm install @wink/elements

Create a client plugin

The .client.ts suffix tells Nuxt to run this plugin only in the browser:

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

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

Configure the runtime variable

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

Add to .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Configure Vue for custom elements

Add the isCustomElement compiler option so Vue does not warn about unknown <wink-*> tags:

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

Use in templates

Wrap Wink components in <ClientOnly> to prevent 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

Extend the global HTMLElementTagNameMap (same as Vue 3) to get attribute autocompletion. See the Vue 3 integration page for the full declaration file.