Nuxt 3

Nuxt 3はデフォルトでサーバー上でページをレンダリングします。CDNスクリプトやカスタム要素はクライアントサイドでのみ読み込む必要があります。Nuxtのクライアントプラグインがこれを行う最もクリーンな場所です。

@wink/elements npm package TypeScript型定義付きでCDNバンドルをインストールおよび読み込みします。

インストール

npm install @wink/elements

クライアントプラグインを作成する

.client.tsのサフィックスはNuxtにこのプラグインをブラウザでのみ実行するよう指示します：

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

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

ランタイム変数を設定する

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

.envに追加：

NUXT_PUBLIC_WINK_CLIENT_ID=your-client-id

カスタム要素用にVueを設定する

Vueが未知の<wink-*>タグについて警告しないように、isCustomElementコンパイラオプションを追加します：

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

テンプレートでの使用

SSRのハイドレーション不一致を防ぐために、Winkコンポーネントを<ClientOnly>でラップします：

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

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

TypeScript型定義

グローバルのHTMLElementTagNameMap（Vue 3と同様）を拡張して属性のオートコンプリートを有効にします。完全な宣言ファイルはVue 3統合ページを参照してください。