Nuxt 3

Nuxt 3 renderar sidor på servern som standard. CDN-skript och anpassade element måste laddas endast på klientsidan. Ett Nuxt-klientplugin är det renaste sättet att göra detta.

@wink/elements npm package Installera och ladda CDN-bunten med TypeScript-typer.

Installera

npm install @wink/elements

Skapa ett klientplugin

Suffixet .client.ts talar om för Nuxt att köra detta plugin endast i webbläsaren:

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

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

Konfigurera runtime-variabeln

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

Lägg till i .env:

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Konfigurera Vue för anpassade element

Lägg till kompilatoralternativet isCustomElement så att Vue inte varnar för okända <wink-*>-taggar:

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

Använd i mallar

Omslut Wink-komponenter i <ClientOnly> för att förhindra SSR-hydreringsavvikelser:

<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

Utöka den globala HTMLElementTagNameMap (samma som Vue 3) för att få attributautokomplettering. Se Vue 3 integrationssidan för hela deklarationsfilen.