{"id":30046702,"url":"https://github.com/interactive-video-labs/interactive-video-vue-wrapper","last_synced_at":"2026-01-20T16:58:39.149Z","repository":{"id":307551113,"uuid":"1029818040","full_name":"interactive-video-labs/interactive-video-vue-wrapper","owner":"interactive-video-labs","description":"🧩 Thin Vue wrapper for the @interactive-video-labs/core library. Bring cue-based interactive video capabilities to your Vue apps with minimal setup. Declarative, type-safe, and Vue-friendly — supports props, events, and composition API.","archived":false,"fork":false,"pushed_at":"2025-07-31T19:35:57.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-31T22:40:51.729Z","etag":null,"topics":["composition-api","cue-points","education-tech","interactive-video","npm-package","typescript","video-interaction","video-player","vue","vue-wrapper","vue3","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/interactive-video-labs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-31T16:11:17.000Z","updated_at":"2025-07-31T19:36:01.000Z","dependencies_parsed_at":"2025-07-31T22:40:53.785Z","dependency_job_id":"ddacf408-d25c-4f83-b302-83a1c7842744","html_url":"https://github.com/interactive-video-labs/interactive-video-vue-wrapper","commit_stats":null,"previous_names":["interactive-video-labs/interactive-video-vue-wrapper"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/interactive-video-labs/interactive-video-vue-wrapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactive-video-labs%2Finteractive-video-vue-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactive-video-labs%2Finteractive-video-vue-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactive-video-labs%2Finteractive-video-vue-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactive-video-labs%2Finteractive-video-vue-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/interactive-video-labs","download_url":"https://codeload.github.com/interactive-video-labs/interactive-video-vue-wrapper/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/interactive-video-labs%2Finteractive-video-vue-wrapper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269227858,"owners_count":24381837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["composition-api","cue-points","education-tech","interactive-video","npm-package","typescript","video-interaction","video-player","vue","vue-wrapper","vue3","vuejs"],"created_at":"2025-08-07T08:53:23.546Z","updated_at":"2026-01-20T16:58:39.144Z","avatar_url":"https://github.com/interactive-video-labs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @interactive-video-labs/vue\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/interactive-video-labs/docs/main/logo.svg\" width=\"200px\" alt=\"Interactive Video Labs Logo\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/@interactive-video-labs/vue\" alt=\"NPM Version\" /\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/@interactive-video-labs/vue\" alt=\"NPM License\" /\u003e\n  \u003cimg src=\"https://img.shields.io/npm/d18m/@interactive-video-labs/vue?style=flat-square\" alt=\"NPM Downloads\" /\u003e\n  \u003ca href=\"https://github.com/interactive-video-labs/interactive-video-vue-wrapper/actions\"\u003e\n    \u003cimg src=\"https://github.com/interactive-video-labs/interactive-video-vue-wrapper/actions/workflows/release.yml/badge.svg\" alt=\"Build Status\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nWelcome to `@interactive-video-labs/vue` — a lightweight Vue 3 wrapper around the `@interactive-video-labs/core` engine for cue-driven interactive video experiences.\n\nThis wrapper enables seamless integration of interactive video players into Vue applications using idiomatic Vue components and bindings, while staying close to the underlying core engine API.\n\n---\n\n## Features\n\n- **Declarative Props**: Control the player via reactive Vue props.\n- **Event Handling**: Listen to player events using a simple `onAnalyticsEvent` callback.\n- **Dynamic Content**: Update cue points and translations on the fly.\n- **Direct Player Access**: Get direct access to the underlying `@interactive-video-labs/core` player instance.\n- **TypeScript Support**: Fully typed for a better development experience.\n\n## Installation\n\nInstall the package and its peer dependencies using your favorite package manager:\n\n```bash\n# With pnpm\npnpm add @interactive-video-labs/vue @interactive-video-labs/core vue\n\n# With npm\nnpm install @interactive-video-labs/vue @interactive-video-labs/core vue\n\n# With yarn\nyarn add @interactive-video-labs/vue @interactive-video-labs/core vue\n```\n\n## Basic Usage\n\nHere's a simple example of how to use the `InteractiveVideo` component in your Vue 3 application.\n\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport InteractiveVideo from '@interactive-video-labs/vue';\nimport '@interactive-video-labs/core/dist/style.css'; // Don't forget to import the styles\n\nconst videoUrl = ref('https://example.com/my-video.mp4');\nconst cues = ref([\n  {\n    time: 10,\n    payload: { type: 'text', content: 'This is a timed message!' },\n  },\n  {\n    time: 25,\n    payload: { type: 'quiz', question: 'What is Vue?' },\n  },\n]);\n\nfunction handleAnalyticsEvent(event, payload) {\n  console.log('Analytics Event:', event, payload);\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cInteractiveVideo\n    :video-url=\"videoUrl\"\n    :cues=\"cues\"\n    :on-analytics-event=\"handleAnalyticsEvent\"\n    autoplay\n    loop\n  /\u003e\n\u003c/template\u003e\n```\n\n## API Reference\n\n### Props\n\nThe component accepts the following props:\n\n| Prop               | Type                                                          | Required | Default | Description                                                                |\n| ------------------ | ------------------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------- |\n| `videoUrl`         | `string`                                                      | `true`   | -       | The URL of the video to be loaded.                                         |\n| `cues`             | `CuePoint[]`                                                  | `false`  | `[]`    | An array of cue points for interactive events. Can be updated dynamically. |\n| `translations`     | `Translations`                                                | `false`  | `{}`    | An object containing translations for the player UI.                       |\n| `onAnalyticsEvent` | `(event: AnalyticsEvent, payload?: AnalyticsPayload) =\u003e void` | `false`  | -       | Callback function for analytics events emitted by the player.              |\n| `autoplay`         | `boolean`                                                     | `false`  | `false` | Whether the video should start playing automatically.                      |\n| `loop`             | `boolean`                                                     | `false`  | `false` | Whether the video should loop.                                             |\n| `locale`           | `string`                                                      | `false`  | `'en'`  | The locale to be used for the player (e.g., 'en', 'es').                   |\n\nAny additional attributes passed to the component will be forwarded to the underlying `@interactive-video-labs/core` player configuration.\n\n### Events\n\nPlayer events are emitted through the `onAnalyticsEvent` prop.\n\n**Available Events:**\n\n- `PLAYER_LOADED`\n- `VIDEO_STARTED`\n- `VIDEO_PAUSED`\n- `VIDEO_ENDED`\n- `CUE_TRIGGERED`\n- `INTERACTION_COMPLETED`\n- `ERROR`\n\n**Example:**\n\n```js\nfunction handleAnalyticsEvent(event, payload) {\n  switch (event) {\n    case 'CUE_TRIGGERED':\n      console.log('A cue was triggered at:', payload.cue.time);\n      break;\n    case 'ERROR':\n      console.error('Player error:', payload.error);\n      break;\n  }\n}\n```\n\n### Exposing the Player Instance\n\nIf you need to call methods on the player instance directly, you can get a reference to it using a `ref` on the component.\n\n```vue\n\u003cscript setup\u003e\nimport { ref, onMounted } from 'vue';\nimport InteractiveVideo from '@interactive-video-labs/vue';\nimport '@interactive-video-labs/core/dist/style.css';\n\nconst videoPlayer = ref(null);\n\nonMounted(() =\u003e {\n  // The player instance is available on videoPlayer.value.playerRef\n  if (videoPlayer.value) {\n    const corePlayer = videoPlayer.value.playerRef;\n    corePlayer.play();\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cInteractiveVideo ref=\"videoPlayer\" video-url=\"https://example.com/my-video.mp4\" /\u003e\n\u003c/template\u003e\n```\n\n---\n\n## 🧑‍💻 For Developers\n\nFor detailed development setup, project structure, testing, build, and publishing instructions, please refer to our [Developer Guide](DEVELOPER.md).\n\n---\n\n## Contributing\n\nContributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finteractive-video-labs%2Finteractive-video-vue-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finteractive-video-labs%2Finteractive-video-vue-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finteractive-video-labs%2Finteractive-video-vue-wrapper/lists"}