{"id":26218815,"url":"https://github.com/logaretm/vue-use-web","last_synced_at":"2025-03-12T14:01:17.096Z","repository":{"id":39385448,"uuid":"208273330","full_name":"Tarektouati/vue-use-web","owner":"Tarektouati","description":"🕸 Web APIs implemented as Vue.js composition functions","archived":false,"fork":false,"pushed_at":"2023-03-04T04:43:36.000Z","size":3694,"stargazers_count":753,"open_issues_count":57,"forks_count":42,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-06-15T04:40:06.587Z","etag":null,"topics":["composition-api","essential","hooks","utility-library","vue","vue-next","vuejs"],"latest_commit_sha":null,"homepage":"https://tarektouati.github.io/vue-use-web/","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/Tarektouati.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2019-09-13T13:45:54.000Z","updated_at":"2024-05-25T12:27:12.000Z","dependencies_parsed_at":"2024-01-07T07:11:07.585Z","dependency_job_id":"f0ab650f-e33a-4d34-a751-33fca8e86170","html_url":"https://github.com/Tarektouati/vue-use-web","commit_stats":{"total_commits":336,"total_committers":20,"mean_commits":16.8,"dds":0.5476190476190477,"last_synced_commit":"730c5ae8bc52479063e16feaa1f9eef43bc42a02"},"previous_names":["logaretm/vue-use-web"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tarektouati%2Fvue-use-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tarektouati%2Fvue-use-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tarektouati%2Fvue-use-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tarektouati%2Fvue-use-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tarektouati","download_url":"https://codeload.github.com/Tarektouati/vue-use-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243230091,"owners_count":20257642,"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":["composition-api","essential","hooks","utility-library","vue","vue-next","vuejs"],"created_at":"2025-03-12T14:00:49.911Z","updated_at":"2025-03-12T14:01:17.065Z","avatar_url":"https://github.com/Tarektouati.png","language":"TypeScript","funding_links":[],"categories":["Packages","✨ Composition API functions"],"sub_categories":[],"readme":"# vue-use-web\n\n\u003cp align=\"center\"\u003e\n\n![Github Actions](https://img.shields.io/github/workflow/status/TarekTouati/vue-use-web/Lint%20and%20test/master?style=flat-square)\n![Codacy grade](https://img.shields.io/codacy/grade/866989b53305443f9b1cdeb646b33d4c?style=flat-square)\n![npm](https://img.shields.io/npm/v/vue-use-web?style=flat-square)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-use-web?style=flat-square)\n![npm](https://img.shields.io/npm/dm/vue-use-web?style=flat-square)\n[![GitHub license](https://img.shields.io/github/license/Tarektouati/vue-use-web?style=flat-square)](https://github.com/Tarektouati/vue-use-web/blob/master/LICENSE)\n\n\u003c/p\u003e\n\nWeb APIs implemented as Vue.js composition functions.\n\nThis is a collection of [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) exposed as Vue.js composition hooks that's upcoming in Vue 3.0\n\nYou can use them with Vue 2.0 using [@vue/composition-api](https://github.com/vuejs/composition-api) until Vue 3.0 gets out.\n\n## What and why\n\nWeb APIs are ever changing, this library aims to provide to Vue.js developers a stable interface that integrates well into the ecosystem. Also an interface that degrades gracefully when browsers do not support said features.\n\nI initially was choosing to expose this as a [Stateful functional components](https://logaretm.com/blog/2019-06-29-stateful-functional-components/) but that isn't very handy and is not future proof. Implementing these APIs in Vue composition API (hooks) makes them ready for Vue 3.0 and beyond. Personally I think this is the perfect example to showcase the power of the Composition API.\n\n## Installation\n\n```bash\n# install with yarn\nyarn add @vue/composition-api vue-use-web\n\n# install with npm\nnpm install @vue/composition-api vue-use-web\n```\n\n## Usage\n\n[Kindly Check the documentation for examples](https://Tarektouati.github.io/vue-use-web/).\n\n## APIs\n\nEach composition function is designed to degrade gracefully so you can safely use them, but you should use these as a progressive enhancements for your apps. Check browsers compatibilities for each API.\n\n- [Battery Status API](https://Tarektouati.github.io/vue-use-web/functions/battery.html).\n- [Clipboard API](https://Tarektouati.github.io/vue-use-web/functions/clipboard.html).\n- [Device Light](https://Tarektouati.github.io/vue-use-web/functions/device-light.html).\n- [Device Motion](https://Tarektouati.github.io/vue-use-web/functions/device-motion.html).\n- [Device Orientation](https://Tarektouati.github.io/vue-use-web/functions/device-orientation.html).\n- [Event Listener](https://Tarektouati.github.io/vue-use-web/functions/event-listener.html).\n- [Fetch API](https://Tarektouati.github.io/vue-use-web/functions/fetch.html).\n- [Full-screen](https://Tarektouati.github.io/vue-use-web/functions/fullscreen.html).\n- [Geo-location API](https://Tarektouati.github.io/vue-use-web/functions/geolocation.html).\n- [Hardware Concurrency](https://Tarektouati.github.io/vue-use-web/functions/hardware-concurrency.html)\n- [Intersection Observer](https://Tarektouati.github.io/vue-use-web/functions/intersection-observer.html).\n- [Localstorage API](https://Tarektouati.github.io/vue-use-web/functions/local-storage.html)\n- [Media Query](https://Tarektouati.github.io/vue-use-web/functions/media-query.html)\n- [Mouse Position](https://Tarektouati.github.io/vue-use-web/functions/mouse-position.html)\n- [Network Information API](https://Tarektouati.github.io/vue-use-web/functions/network.html).\n- [Preferred Color Scheme](https://Tarektouati.github.io/vue-use-web/functions/preferred-color-scheme.html).\n- [Preferred Languages](https://Tarektouati.github.io/vue-use-web/functions/preferred-languages.html).\n- [Script](https://Tarektouati.github.io/vue-use-web/functions/script.html).\n- [WebSocket](https://Tarektouati.github.io/vue-use-web/functions/websocket.html).\n- [Window Scroll Position](https://Tarektouati.github.io/vue-use-web/functions/scroll-position.html).\n- [Window Size](https://Tarektouati.github.io/vue-use-web/functions/window-size.html).\n- [Worker](https://Tarektouati.github.io/vue-use-web/functions/worker.html).\n- [Notification](https://Tarektouati.github.io/vue-use-web/functions/worker.html).\n- [Media Devices](https://Tarektouati.github.io/vue-use-web/functions/device-media.html).\n- Bluetooth (TODO).\n- Share (TODO).\n- ResizeObserver (WIP)\n\n## Inspiration\n\nThis library is inspired by [the-platform](https://github.com/palmerhq/the-platform) and [standard-hooks](https://github.com/kripod/standard-hooks) for React.js.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvue-use-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogaretm%2Fvue-use-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvue-use-web/lists"}