{"_id":"@adsgram/vue","_rev":"4-5c46f32223418941def79cb725250f7a","name":"@adsgram/vue","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@adsgram/vue","version":"1.0.0","_id":"@adsgram/vue@1.0.0","maintainers":[{"name":"artem-h","email":"gavrilenkoartem038@gmail.com"}],"dist":{"shasum":"dd6c0ddd6852f371c98566b970b7ac287a31ab7b","tarball":"https://registry.npmjs.org/@adsgram/vue/-/vue-1.0.0.tgz","fileCount":8,"integrity":"sha512-IyMRehZMHSSnlLVekD3rzBCod18YlaWlXf4gHLUZLPc+JTaxgjyzs9K5pCMwdLSTlGyEt6JVuJSA9frdZ/FmFA==","signatures":[{"sig":"MEUCIQCK/pJcFmB+tSbxHmWQMwkIu5T0dgCaAZcAVTdm90vJQwIgVRlLk8hCsOfvgkS3EvyNl3zCWYyUryzivJ2z1YjXkyw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10334},"main":"dist/index.js","type":"module","_from":"file:adsgram-vue-1.0.0.tgz","types":"dist/index.d.ts","scripts":{"lint":"eslint .","build":"pnpm clean && vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"artem-h","email":"gavrilenkoartem038@gmail.com"},"_resolved":"/private/var/folders/h9/3d3cttkj5390bsq08m290_2r0000gn/T/5a1850bbe29088abeb7e0a32026c11f8/adsgram-vue-1.0.0.tgz","_integrity":"sha512-IyMRehZMHSSnlLVekD3rzBCod18YlaWlXf4gHLUZLPc+JTaxgjyzs9K5pCMwdLSTlGyEt6JVuJSA9frdZ/FmFA==","_npmVersion":"10.9.2","description":"Vue 3 bindings for the Adsgram SDK. Provides components and composition functions for ad tasks and fullscreen banners.","directories":{},"_nodeVersion":"22.15.0","dependencies":{"@adsgram/common":"1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.16","vite":"^6.3.5","vue-tsc":"^2.2.10","typescript":"^5.8.3","@types/node":"^24.0.1","@vitejs/plugin-vue":"^5.2.4"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.0_1749805456940_0.12702999154067496","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@adsgram/vue","version":"1.0.1","_id":"@adsgram/vue@1.0.1","maintainers":[{"name":"artem-h","email":"gavrilenkoartem038@gmail.com"},{"name":"aetat","email":"aetatarov@gmail.com"}],"homepage":"https://docs.adsgram.ai/publisher/","dist":{"shasum":"0b901195630d9fb208d5bd01321ee625aa406c41","tarball":"https://registry.npmjs.org/@adsgram/vue/-/vue-1.0.1.tgz","fileCount":10,"integrity":"sha512-y+HUmf8jLfLHAB3zmZiVa1AAfEfhySj9eTCqJorUZWzEIuJqXaEYm46wYUqZKjaPKcRXXIX9BQ+TXcHciuwBSg==","signatures":[{"sig":"MEYCIQClXWuLGnhcd+8pp9dCPywDmfwOU4vIn7VvYdKkPuWB7gIhAIwk4xhLna3pCdkJ/CbjyM9OETHUaE1d9xzXivaXwqZx","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":144463},"main":"dist/index.js","type":"module","_from":"file:adsgram-vue-1.0.1.tgz","types":"dist/index.d.ts","scripts":{"lint":"eslint .","build":"pnpm clean && vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"artem-h","actor":{"name":"artem-h","type":"user","email":"gavrilenkoartem038@gmail.com"},"email":"gavrilenkoartem038@gmail.com"},"_resolved":"/private/var/folders/h9/3d3cttkj5390bsq08m290_2r0000gn/T/d048a239296c10a03fa4f5c045db325a/adsgram-vue-1.0.1.tgz","_integrity":"sha512-y+HUmf8jLfLHAB3zmZiVa1AAfEfhySj9eTCqJorUZWzEIuJqXaEYm46wYUqZKjaPKcRXXIX9BQ+TXcHciuwBSg==","_npmVersion":"10.9.2","description":"Vue 3 bindings for the Adsgram SDK. Provides components and composition functions for ad tasks and fullscreen banners.","directories":{},"_nodeVersion":"22.15.0","dependencies":{"@adsgram/common":"1.0.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.16","vite":"^6.3.5","vue-tsc":"^2.2.10","typescript":"^5.8.3","@types/node":"^24.0.1","@vitejs/plugin-vue":"^5.2.4"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_1.0.1_1750270876081_0.623854796886548","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@adsgram/vue","homepage":"https://docs.adsgram.ai/publisher/","version":"1.0.2","type":"module","main":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"dependencies":{"@adsgram/common":"1.0.2"},"devDependencies":{"@types/node":"^24.0.1","@vitejs/plugin-vue":"^5.2.4","typescript":"^5.8.3","vite":"^6.3.5","vue":"^3.5.16","vue-tsc":"^2.2.10"},"peerDependencies":{"vue":">=3.0.0"},"scripts":{"clean":"rm -rf dist","build":"pnpm clean && vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist","lint":"eslint .","typecheck":"tsc --noEmit"},"_id":"@adsgram/vue@1.0.2","description":"Vue 3 bindings for the Adsgram SDK. Provides components and composition functions for ad tasks and fullscreen banners.","_integrity":"sha512-hCB4F8ihdSMQ6NH8jd5Pt8KZNQZlbF7niffm0lULOw+ABAlcgMkHOCbNzBnBUkgbIHQfj4kxPt3z5FMJOK5czA==","_resolved":"/private/var/folders/h9/3d3cttkj5390bsq08m290_2r0000gn/T/73fd870cb34731ffe00ae912a6c44785/adsgram-vue-1.0.2.tgz","_from":"file:adsgram-vue-1.0.2.tgz","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-hCB4F8ihdSMQ6NH8jd5Pt8KZNQZlbF7niffm0lULOw+ABAlcgMkHOCbNzBnBUkgbIHQfj4kxPt3z5FMJOK5czA==","shasum":"e0dbd858d921dc484d7910a30b2514365d9ad923","tarball":"https://registry.npmjs.org/@adsgram/vue/-/vue-1.0.2.tgz","fileCount":8,"unpackedSize":11187,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC63TuzErXKFqCT9Oew3FfuDmGegPCum5DkMTRT84RYlgIhAJAxk6Hg4O2sWK+54yPYj3SGw8oCsHT6JpbpDGK11ovh"}]},"_npmUser":{"name":"artem-h","email":"gavrilenkoartem038@gmail.com","actor":{"name":"artem-h","email":"gavrilenkoartem038@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"artem-h","email":"gavrilenkoartem038@gmail.com"},{"name":"aetat","email":"aetatarov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_1.0.2_1750272769227_0.41213346378645754"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-13T09:04:16.819Z","modified":"2025-06-18T18:52:49.598Z","1.0.0":"2025-06-13T09:04:17.123Z","1.0.1":"2025-06-18T18:21:16.379Z","1.0.2":"2025-06-18T18:52:49.399Z"},"homepage":"https://docs.adsgram.ai/publisher/","description":"Vue 3 bindings for the Adsgram SDK. Provides components and composition functions for ad tasks and fullscreen banners.","maintainers":[{"name":"artem-h","email":"gavrilenkoartem038@gmail.com"},{"name":"aetat","email":"aetatarov@gmail.com"}],"readme":"# @adsgram/vue\n\nVue 3 bindings for the Adsgram SDK. Provides components and composition functions for ad tasks and fullscreen banners.\n\n## Installation\n\n```bash\nnpm install @adsgram/vue\n# or\nyarn add @adsgram/vue\n# or\npnpm add @adsgram/vue\n```\n\n## Components\n\n### `<AdsgramTask />`\n\nVue wrapper component for the `<adsgram-task>` custom element. Using for the [Task](https://docs.adsgram.ai/publisher/task-examples) ad format.\n\n<img src=\"https://docs.adsgram.ai/assets/native_task.Dp3rdtR0.png\" alt=\"Task ad\" width=\"300\">\n\n#### Props\n| Prop               | Type           | Description                             |\n|--------------------|----------------|-----------------------------------------|\n| `blockId`          | `string`       | Unique task block ID (required)         |\n| `debug`            | `boolean`      | Enable debug mode (optional)            |\n| `className`        | `string`       | Optional CSS class name (optional)      |\n| `onReward`         | `EventHandler` | Reward event callback (optional)        |\n| `onError`          | `EventHandler` | Error event callback (optional)         |\n| `onBannerNotFound` | `EventHandler` | No banner available callback (optional) |\n| `onTooLongSession` | `EventHandler` | Long session callback (optional)        |\n\n#### Customization\nMore info about customization and slots usage see [here](http://localhost:5173/publisher/task-integration-example#_4-customise-task-so-it-fits-your-application-design)\n\n#### Example\n```vue\n<script setup lang=\"ts\">\nimport { AdsgramTask } from \"@adsgram/vue\";\n\nconst handleReward = (event: CustomEvent<string>): void => {\n  console.log(\"User earned reward:\", event.detail);\n};\n\nconst handleError = (event: CustomEvent<string>): void => {\n  console.error(\"Task error:\", event.detail);\n};\n\n</script>\n\n<template>\n  <AdsgramTask\n    blockId=\"task-11621\"\n    data-debug=\"true\"\n    class=\"task\"\n    :onReward=\"handleReward\"\n    :onError=\"handleError\"\n  >\n    <span slot=\"reward\" className=\"task__reward\">1000 coins</span>\n    <div slot=\"button\" className=\"task__button\">go</div>\n    <div slot=\"claim\" className=\"task__button_claim\">claim</div>\n    <div slot=\"done\" className=\"task__button_done\">done</div>\n  </AdsgramTask>\n</template>\n\n<style scoped>\n.task {\n  // your styles for task element\n}\n</style>\n```\n\n## Composition API\n\n### `useAdsgram`\nVue composable for managing fullscreen ads. Using for the [Reward](https://docs.adsgram.ai/publisher/reward-examples) and [Interstitial](https://docs.adsgram.ai/publisher/interstitial-examples) ad formats.\n\n<img src=\"https://docs.adsgram.ai/assets/rewarded_video.CdG2Ubqt.png\" alt=\"Fullscreen ad\" width=\"300\">\n\n#### Props\n| Prop               | Type                           | Description                                       |\n| ------------------ | ------------------------------ | ------------------------------------------------- |\n| `blockId`          | `string`                       | Unique ad block ID (required)                     |\n| `debug`            | `boolean`                      | Enable debug mode (optional)                      |\n| `debugBannerType`  | `string`                       | Forced banner type in debug mode (optional)       |\n| `onReward`         | `(event: CustomEvent) => void` | Handler for the `reward` event (optional)         |\n| `onError`          | `(event: CustomEvent) => void` | Handler for the `error` event (optional)          |\n\n#### Returns\nAn object with methods to control the Adsgram ad:\n- `show(): Promise<ShowPromiseResult>` — Shows the ad and resolves with the result.\n- `addEventListener(event: string, handler: (event: CustomEvent) => void): void` — Add event listener.\n- `removeEventListener(event: string, handler: (event: CustomEvent) => void): void` — Remove event listener.\n- `destroy(): void` — Destroys the ad controller.\n\n#### Example\n```vue\n<script setup lang=\"ts\">\nimport { useAdsgram } from \"@adsgram/vue\";\n\nconst { show, addEventListener } = useAdsgram({\n  blockId: \"123\",\n  onReward: (): void => {\n    // user watch ad till the end\n    // your code to reward user for rewarded format\n  },\n  onError: (): void => {\n    // user get error during playing ad\n    // do nothing or whatever you want\n  },\n});\n\n// Subscribe on events with addEventListener\naddEventListener(\"onBannerNotFound\", () => {\n  console.log(\"Banner not found\");\n});\n</script>\n\n<template>\n  <button @click=\"show\">Show Ad</button>\n</template>\n\n```\n","readmeFilename":"README.md"}