Vue 3

Vue 3는 <wink-*> 태그를 미해결 Vue 컴포넌트가 아닌 네이티브 커스텀 요소로 처리하기 위해 컴파일러 힌트가 하나 필요합니다. 그 후에는 다른 HTML 요소처럼 작동합니다.

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

설치

npm install @wink/elements

컴파일러 구성

Vite + Vue (vite.config.ts)

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // "wink-"로 시작하는 모든 태그를 커스텀 요소로 처리
          isCustomElement: (tag) => tag.startsWith('wink-'),
        },
      },
    }),
  ],
});

Vue CLI (vue.config.js)

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => ({
        ...options,
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('wink-'),
        },
      }));
  },
};

앱 시작 시 CDN 한 번 로드하기

src/main.ts

import { createApp } from 'vue';
import App from './App.vue';
import { load } from '@wink/elements';

load({ clientId: import.meta.env.VITE_WINK_CLIENT_ID });

createApp(App).mount('#app');

템플릿에서 사용하기

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

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

TypeScript — 전역 요소 타입 확장

Vue 3 + TypeScript는 전역 HTMLElementTagNameMap에서 커스텀 요소 타입을 읽습니다. 선언 파일을 추가하세요:

src/wink-elements.d.ts

import type {
  WinkContentLoaderAttributes,
  WinkLookupAttributes,
  WinkSearchButtonAttributes,
  WinkAccountButtonAttributes,
  WinkItineraryButtonAttributes,
  WinkShoppingCartButtonAttributes,
  WinkAppLoaderAttributes,
} from '@wink/elements';

declare global {
  interface HTMLElementTagNameMap {
    'wink-content-loader': HTMLElement & WinkContentLoaderAttributes;
    'wink-lookup': HTMLElement & WinkLookupAttributes;
    'wink-search-button': HTMLElement & WinkSearchButtonAttributes;
    'wink-account-button': HTMLElement & WinkAccountButtonAttributes;
    'wink-itinerary-button': HTMLElement & WinkItineraryButtonAttributes;
    'wink-shopping-cart-button': HTMLElement & WinkShoppingCartButtonAttributes;
    'wink-app-loader': HTMLElement & WinkAppLoaderAttributes;
  }
}

환경 변수

.env.local에 추가하세요:

VITE_WINK_CLIENT_ID=your-client-id

Vite는 VITE_ 접두사가 붙은 변수만 클라이언트 번들에 노출합니다.

팁

Nuxt 3의 경우, SSR 안전한 로딩을 다루는 전용 Nuxt 통합 페이지를 참고하세요.

추가 자료

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