Nuxt 3

Nuxt 3는 기본적으로 서버에서 페이지를 렌더링합니다. CDN 스크립트와 커스텀 엘리먼트는 클라이언트 사이드에서만 로드되어야 합니다. Nuxt 클라이언트 플러그인이 이를 처리하기에 가장 깔끔한 방법입니다.

@wink/elements npm 패키지 TypeScript 타입과 함께 CDN 번들을 설치하고 로드하세요.

설치

npm install @wink/elements

클라이언트 플러그인 생성

.client.ts 접미사는 Nuxt에 이 플러그인을 브라우저에서만 실행하도록 지시합니다:

plugins/wink.client.ts

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

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

런타임 변수 구성

nuxt.config.ts

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 컴파일러 옵션을 추가하세요:

nuxt.config.ts

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

템플릿에서 사용하기

Wink 컴포넌트를 <ClientOnly>로 감싸 SSR 하이드레이션 불일치를 방지하세요:

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

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

팁

<ClientOnly>는 서버에서 플레이스홀더를 렌더링하고 클라이언트에서 실제 엘리먼트를 마운트합니다 — Nuxt에서 브라우저 전용 서드파티 임베드를 위한 권장 패턴입니다.

TypeScript 타입

전역 HTMLElementTagNameMap을 확장하여(이는 Vue 3과 동일) 속성 자동완성을 지원합니다. 전체 선언 파일은 Vue 3 통합 페이지를 참조하세요.

추가 자료

• 웹 컴포넌트 참조
• @wink/elements npm 패키지
• Vue 3 통합