Nuxt 3

Nuxt 3 renderer sider på serveren som standard. CDN-skript og egendefinerte elementer må lastes kun på klientsiden. En Nuxt klient-plugin er det reneste stedet å gjøre dette på.

@wink/elements npm package Installer og last inn CDN-bunten med TypeScript-typer.

Installer

npm install @wink/elements

Lag en klient-plugin

Suffixet .client.ts forteller Nuxt å kjøre denne pluginen kun i nettleseren:

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

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

Konfigurer runtime-variabelen

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

Legg til i .env:

NUXT_PUBLIC_WINK_CLIENT_ID=din-klient-id

Konfigurer Vue for egendefinerte elementer

Legg til isCustomElement compiler-alternativet slik at Vue ikke advarer om ukjente <wink-*>-tagger:

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

Bruk i maler

Pakk Wink-komponenter inn i <ClientOnly> for å forhindre SSR hydration-feil:

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

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

TypeScript-typer

Utvid den globale HTMLElementTagNameMap (samme som Vue 3) for å få autokomplettering av attributter. Se Vue 3 integrasjonssiden for hele deklarasjonsfilen.