@dable-ad/vue

Vue용 Dable 위젯 컴포넌트 라이브러리입니다.

설치

npm install @dable-ad/vue

기본 사용법

DableWidget 컴포넌트

Composition API (권장)

<template>
  <!-- 기본 추천 위젯 -->
  <DableWidget 
    widgetId="your-widget-id" 
    widgetType="reco" 
  />

  <!-- 로그 포함 추천 위젯 (서비스명 필요) -->
  <DableWidget 
    widgetId="your-widget-id" 
    widgetType="reco-log" 
    serviceName="your-service-name" 
  />

  <!-- 광고 위젯 (서비스명 필요) -->
  <DableWidget 
    widgetId="your-widget-id" 
    widgetType="ads" 
    serviceName="your-service-name" 
  />
</template>

<script setup>
import { DableWidget } from '@dable-ad/vue';
</script>

Options API

<template>
  <DableWidget 
    widgetId="your-widget-id" 
    widgetType="reco" 
  />
</template>

<script>
import { DableWidget } from '@dable-ad/vue';

export default {
  components: { DableWidget }
};
</script>

고급 사용법

useDable Composable

<template>
  <div id="dablewidget_your-widget-id" />
</template>

<script setup>
import { useDable } from '@dable-ad/vue';

const dable = useDable();
dable('setService', 'your-service-name');
dable('renderWidget', 'dablewidget_your-widget-id');
</script>

저수준 API로 Dable 함수에 직접 접근할 수 있습니다. 대부분의 경우 DableWidget 컴포넌트 사용을 권장합니다.

Vue 버전 지원

• Vue 3: Composition API 및 Options API 모두 지원
• Vue 2: Options API 지원

TypeScript 지원

TypeScript 사용 시 별도 설정 없이 타입 안전성을 제공합니다:

• 자동완성 및 타입 체크
• 별도의 import type 불필요

예제

실제 동작하는 예제를 확인하려면:

git clone https://github.com/teamdable/widget-plugin.git
cd widget-plugin
npm install
cd examples/vue-example
npm run dev

온라인에서 예제 코드 보기:

• Vue 예제 코드

요구사항

• Vue 3.3.0 이상