{"id":21834603,"url":"https://github.com/mineiros-io/vue-drift-widget","last_synced_at":"2026-05-11T16:08:10.758Z","repository":{"id":53561993,"uuid":"330038638","full_name":"mineiros-io/vue-drift-widget","owner":"mineiros-io","description":"A Vue 3 plugin for the drift.com widget","archived":false,"fork":false,"pushed_at":"2021-03-24T08:23:07.000Z","size":392,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-26T09:43:04.396Z","etag":null,"topics":["drift","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mineiros-io.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2021-01-15T22:45:07.000Z","updated_at":"2021-05-26T10:04:49.000Z","dependencies_parsed_at":"2022-09-16T08:11:38.895Z","dependency_job_id":null,"html_url":"https://github.com/mineiros-io/vue-drift-widget","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mineiros-io%2Fvue-drift-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mineiros-io%2Fvue-drift-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mineiros-io%2Fvue-drift-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mineiros-io%2Fvue-drift-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mineiros-io","download_url":"https://codeload.github.com/mineiros-io/vue-drift-widget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244811374,"owners_count":20514276,"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","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":["drift","vue"],"created_at":"2024-11-27T20:13:09.082Z","updated_at":"2026-05-11T16:08:08.755Z","avatar_url":"https://github.com/mineiros-io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg src=\"https://raw.githubusercontent.com/mineiros-io/brand/3bffd30e8bdbbde32c143e2650b2faa55f1df3ea/mineiros-primary-logo.svg\" width=\"400\"/\u003e][homepage]\n[![CI Pipeline](https://github.com/mineiros-io/vue-drift-widget/actions/workflows/build.yml/badge.svg)](https://github.com/mineiros-io/vue-drift-widget/actions/workflows/build.yml)\n\n# vue-drift-widget\n\nA cheap (~ 3kb) [Vue 3] plugin for the [drift.com] widget.\n\n## Features\n\n- **✅ Strongly-typed API:** Full typescript support and strongly typed drift API\n- **✅ Tiny:** \u003c 3kb minified \u0026 compressed\u003e\n\n## Requirements\n\n- **Vue.js** \u003e= 3.0.0\n- **Drift.com account** to receive a drift widget id.\n\n## Installation\n\nTo install the latest version:\n\n```sh\nnpm install --save @mineirosio/vue-drift-widget\n```\n\n```sh\nyarn add @mineirosio/vue-drift-widget\n```\n\n## Usage\n\nTo load the drift widget in your app,\nload the plugin and set your widget id.\n\n**`main.ts`**:\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport { createDriftPlugin } from '@mineirosio/vue-drift-widget'\n\nconst driftID = 'XXXXXX'\n\ncreateApp(App)\n  .use(\n    createDriftPlugin({\n      widgetId: driftId,\n    }),\n  )\n  .mount('#app')\n```\n\nThe config is a reactive object that will be injected into the app in the plugins\ninstall method. This allows us to dynamically enable and disable the widget,\nwhich is helpful when you e.g., need to handle GDPR consents.\n\n**`main.ts`**:\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport { createDriftPlugin } from '@mineirosio/vue-drift-widget'\n\nconst driftID = 'XXXXXX'\n\ncreateApp(App)\n  .use(\n    createDriftPlugin({\n      widgetId: driftId,\n      enabled: false, // Don't enable the widget per default\n    }),\n  )\n  .mount('#app')\n```\n\n**`App.vue`**:\n\n```ts\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    drift configuration {{ driftConfig }}\n  \u003c/div\u003e\n  \u003cbutton @click=\"initDrift()\" :disabled=\"driftConfig.enabled\"\u003eInitalize Drift\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, inject} from 'vue'\nimport { useDriftPluginConfig } from '/drift/index'\n\nexport default defineComponent({\n  name: 'App',\n  setup() {\n    const driftConfig = useDriftPluginConfig() // this is a wrapper around inject()\n\n    const initDrift = (): void =\u003e {\n      if(driftConfig) {\n        driftConfig.enabled = true\n      }\n    }\n\n    return { driftConfig, initDrift }\n  }\n})\n\u003c/script\u003e\n```\n\n### Interact with Drifts API\n\nThis plugin currently supports most of the API endpoints provided by the widget.\nFor further information on how to interact with the widget, please read the [https://devdocs.drift.com/docs/widget-start][drift-docs].\n\n```ts\n\u003ctemplate\u003e\n  \u003cp\u003edrift.com example\u003c/p\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { useDrift } from '/drift/index'\nimport { defineComponent} from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const drift  = useDrift()\n    if(drift) {\n\n      // api and payload are stronly typed\n      drift.on('ready', (api, payload) =\u003e {\n        api.openChat();\n        console.log(api);\n        console.log(payload);\n      })\n\n      drift.on('message', (data) =\u003e {\n        console.log(data);\n      })\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n### Examples\n\nFor a fully functional example please find [example]\n\n\u003c!-- References --\u003e\n\n[homepage]: https://mineiros.io/?ref=terraform-aws-iam-role\n[example]: https://github.com/mineiros-io/vue-drift-widget/tree/main/examples/vue-drift-widget\n[vue 3]: https://vuejs.org\n[drift.com]: https://www.drift.com\n[drift-docs]: https://devdocs.drift.com/docs/widget-start\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmineiros-io%2Fvue-drift-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmineiros-io%2Fvue-drift-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmineiros-io%2Fvue-drift-widget/lists"}