{"_id":"@adwhale/web-sdk-vue","name":"@adwhale/web-sdk-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@adwhale/web-sdk-vue","version":"0.0.1","type":"module","description":"ADwhale Web SDK Vue 3 wrapper","license":"MIT","publishConfig":{"access":"public"},"keywords":["adwhale","ad","mediation","sdk","vue","vue3","banner","interstitial","native"],"main":"dist/cjs/index.cjs","module":"dist/esm/index.js","types":"dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"}},"scripts":{"build":"rollup -c rollup.config.js","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"peerDependencies":{"@adwhale/web-sdk":">=0.0.1","vue":"^3.4.0"},"devDependencies":{"@adwhale/web-sdk":"workspace:*","vue":"^3.5.13"},"sideEffects":false,"_id":"@adwhale/web-sdk-vue@0.0.1","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-7Bl6le21YdrMcLLLXZTzOs/ZguOdOFXPfM/oSdgCIm2j1tL9TDTTMfhiRLZ4UX53s7P+HDiWfIFtaxfc4RaZgQ==","shasum":"71b805d9adfa765fd1a583ed43dd2915845d1fdc","tarball":"https://registry.npmjs.org/@adwhale/web-sdk-vue/-/web-sdk-vue-0.0.1.tgz","fileCount":8,"unpackedSize":29318,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDrygAfhMIG4s6l4+uO11H4tl79ETzBU++xvR+aKLlNkQIhAIBpVS6N9tNNSwWEtQUVbp14RlQQqdzr2P4XB4TfvPSa"}]},"_npmUser":{"name":"fsn_lab","email":"develop@fsn.co.kr"},"directories":{},"maintainers":[{"name":"fsn_lab","email":"develop@fsn.co.kr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-sdk-vue_0.0.1_1773991214013_0.7791898230989911"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-20T07:20:13.922Z","0.0.1":"2026-03-20T07:20:14.195Z","modified":"2026-03-20T07:20:14.445Z"},"maintainers":[{"name":"fsn_lab","email":"develop@fsn.co.kr"}],"description":"ADwhale Web SDK Vue 3 wrapper","keywords":["adwhale","ad","mediation","sdk","vue","vue3","banner","interstitial","native"],"license":"MIT","readme":"# @adwhale/web-sdk-vue\n\nADwhale Web SDK의 Vue 3 래퍼 라이브러리.\n\n## 설치\n\n```bash\nnpm install @adwhale/web-sdk @adwhale/web-sdk-vue\n```\n\n## 빠른 시작\n\n### 1. 플러그인 등록\n\n```ts\n// main.ts\nimport { createApp } from 'vue';\nimport { AdWhalePlugin } from '@adwhale/web-sdk-vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.use(AdWhalePlugin, {\n  publisherUid: 'PUB-XXXX',\n  debug: true,\n});\napp.mount('#app');\n```\n\n### 2. 배너 광고\n\n```vue\n<template>\n  <AdWhaleBanner\n    placement-uid=\"PLACE-XXXX\"\n    ad-size=\"320x50\"\n    :auto-refresh=\"true\"\n    loading=\"lazy\"\n    passback-tag=\"<div>fallback</div>\"\n    @ad-loaded=\"onAdLoaded\"\n    @ad-load-failed=\"onAdLoadFailed\"\n    @ad-impression=\"onAdImpression\"\n    @ad-clicked=\"onAdClicked\"\n    @ad-refreshed=\"onAdRefreshed\"\n    @passback=\"onPassback\"\n    class=\"my-banner\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { AdWhaleBanner } from '@adwhale/web-sdk-vue';\nimport type { AdResponseInfo, AdError } from '@adwhale/web-sdk-vue';\n\nconst onAdLoaded = (info: AdResponseInfo) => console.log('loaded', info);\nconst onAdLoadFailed = (error: AdError) => console.log('failed', error);\nconst onAdImpression = (info: AdResponseInfo) => console.log('impression', info);\nconst onAdClicked = () => console.log('clicked');\nconst onAdRefreshed = (info: AdResponseInfo) => console.log('refreshed', info);\nconst onPassback = () => console.log('passback');\n</script>\n```\n\n### 3. 전면 광고 (Interstitial)\n\nComposable로 제공됩니다. 반환값은 `Ref<boolean>` 기반의 반응형 상태입니다.\n\n```vue\n<template>\n  <button @click=\"show()\" :disabled=\"!isLoaded\">다음 스테이지</button>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted } from 'vue';\nimport { useInterstitialAd } from '@adwhale/web-sdk-vue';\n\nconst { isLoaded, isShowing, load, show } = useInterstitialAd({\n  placementUid: 'PLACE-YYYY',\n  onAdLoaded: (info) => console.log('ready', info),\n  onAdLoadFailed: (error) => console.log('failed', error),\n  onAdShowed: () => console.log('showed'),\n  onAdImpression: (info) => console.log('impression', info),\n  onAdClosed: () => console.log('closed'),\n  onAdClicked: () => console.log('clicked'),\n});\n\nonMounted(() => load());\n</script>\n```\n\n### 4. 네이티브 광고\n\nScoped slot으로 커스텀 레이아웃을 구성합니다.\n\n```vue\n<template>\n  <AdWhaleNative\n    placement-uid=\"PLACE-ZZZZ\"\n    loading=\"lazy\"\n    @ad-loaded=\"onAdLoaded\"\n    @ad-impression=\"onAdImpression\"\n    @passback=\"onPassback\"\n    v-slot=\"{ ad }\"\n  >\n    <div v-if=\"ad\" class=\"my-native-ad\">\n      <img :src=\"ad.imageIcon\" alt=\"\" />\n      <h3>{{ ad.title }}</h3>\n      <p>{{ ad.desc }}</p>\n      <img :src=\"ad.imageMain\" alt=\"\" />\n      <span>{{ ad.sponsored }}</span>\n      <a :href=\"ad.linkUrl\"><button>{{ ad.ctaText }}</button></a>\n    </div>\n  </AdWhaleNative>\n</template>\n\n<script setup lang=\"ts\">\nimport { AdWhaleNative } from '@adwhale/web-sdk-vue';\n\nconst onAdLoaded = (info: any) => console.log('loaded', info);\nconst onAdImpression = (info: any) => console.log('impression', info);\nconst onPassback = () => console.log('passback');\n</script>\n```\n\n## API\n\n### `AdWhalePlugin`\n\nVue 플러그인. `app.use()`로 등록하며, SDK 초기화와 config provide를 수행합니다.\n\n```ts\napp.use(AdWhalePlugin, config: AdWhaleInitConfig);\n```\n\n### `<AdWhaleBanner>`\n\n| Prop | 타입 | 필수 | 설명 |\n|------|------|------|------|\n| `placement-uid` | `string` | O | 지면 UID |\n| `ad-size` | `\"320x50\" \\| \"320x100\" \\| \"300x250\" \\| \"250x250\" \\| \"adaptive\"` | | 광고 사이즈 |\n| `auto-refresh` | `boolean` | | 자동 갱신 |\n| `loading` | `\"lazy\" \\| \"eager\"` | | 로딩 방식 |\n| `passback-tag` | `string` | | Passback HTML |\n\n| 이벤트 | Payload | 설명 |\n|--------|---------|------|\n| `@ad-loaded` | `AdResponseInfo` | 광고 로드 성공 |\n| `@ad-load-failed` | `AdError` | 광고 로드 실패 |\n| `@ad-impression` | `AdResponseInfo` | 노출 기록 |\n| `@ad-clicked` | — | 클릭 |\n| `@ad-refreshed` | `AdResponseInfo` | 자동 갱신 완료 |\n| `@passback` | — | Passback 실행 |\n\n### `useInterstitialAd(options)`\n\n| 옵션 | 타입 | 필수 | 설명 |\n|------|------|------|------|\n| `placementUid` | `string` | O | 지면 UID |\n| `passbackTag` | `string` | | Passback HTML |\n| `onAdLoaded` | `(info) => void` | | 로드 완료 |\n| `onAdLoadFailed` | `(error) => void` | | 로드 실패 |\n| `onAdShowed` | `() => void` | | 표시됨 |\n| `onAdImpression` | `(info) => void` | | 노출 |\n| `onAdClosed` | `() => void` | | 닫힘 |\n| `onAdClicked` | `() => void` | | 클릭 |\n| `onPassback` | `() => void` | | Passback |\n\n**반환값:**\n\n| 필드 | 타입 | 설명 |\n|------|------|------|\n| `isLoaded` | `Ref<boolean>` | 로드 완료 여부 |\n| `isShowing` | `Ref<boolean>` | 표시 중 여부 |\n| `load()` | `() => void` | 광고 로드 |\n| `show()` | `() => void` | 광고 표시 |\n\n### `<AdWhaleNative>`\n\n| Prop | 타입 | 필수 | 설명 |\n|------|------|------|------|\n| `placement-uid` | `string` | O | 지면 UID |\n| `loading` | `\"lazy\" \\| \"eager\"` | | 로딩 방식 |\n| `passback-tag` | `string` | | Passback HTML |\n\n| 이벤트 | Payload | 설명 |\n|--------|---------|------|\n| `@ad-loaded` | `AdResponseInfo` | 로드 완료 |\n| `@ad-load-failed` | `AdError` | 로드 실패 |\n| `@ad-impression` | `AdResponseInfo` | 노출 |\n| `@ad-clicked` | — | 클릭 |\n| `@passback` | — | Passback |\n\n**Scoped Slot:**\n\n| 필드 | 타입 | 설명 |\n|------|------|------|\n| `ad` | `NativeAdData \\| null` | 네이티브 광고 데이터 |\n\n## 요구사항\n\n- Vue 3.4 이상\n- `@adwhale/web-sdk` 필수\n","readmeFilename":"README.md","_rev":"1-6889f7ec5eff53a5a17ffe883c818fa9"}