{"id":22489868,"url":"https://github.com/logaretm/vue-adaptive-utils","last_synced_at":"2025-08-02T22:31:28.686Z","repository":{"id":40289820,"uuid":"238284879","full_name":"logaretm/vue-adaptive-utils","owner":"logaretm","description":"Deliver empathetic experiences to your users by adapting to their capabilities","archived":true,"fork":false,"pushed_at":"2022-05-16T20:28:24.000Z","size":1528,"stargazers_count":60,"open_issues_count":18,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-02T01:09:56.307Z","etag":null,"topics":["adaptive-loading","cpu","loading","memory","network","performance","vue"],"latest_commit_sha":null,"homepage":"https://logaretm.github.io/vue-adaptive-utils/","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/logaretm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-04T19:12:54.000Z","updated_at":"2023-09-24T16:20:29.000Z","dependencies_parsed_at":"2022-08-09T16:17:43.450Z","dependency_job_id":null,"html_url":"https://github.com/logaretm/vue-adaptive-utils","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-adaptive-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-adaptive-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-adaptive-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logaretm%2Fvue-adaptive-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logaretm","download_url":"https://codeload.github.com/logaretm/vue-adaptive-utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500536,"owners_count":17930084,"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":["adaptive-loading","cpu","loading","memory","network","performance","vue"],"created_at":"2024-12-06T17:21:00.386Z","updated_at":"2024-12-06T17:23:21.918Z","avatar_url":"https://github.com/logaretm.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vue-adaptive-utils\n\n\u003e Deliver empathetic experiences to your users by adapting to their capabilities\n\n\u003cp align=\"center\"\u003e\n\n[![codecov](https://codecov.io/gh/logaretm/vue-adaptive-utils/branch/master/graph/badge.svg)](https://codecov.io/gh/logaretm/vue-adaptive-utils)\n[![Build Status](https://travis-ci.org/logaretm/vue-adaptive-utils.svg?branch=master)](https://travis-ci.org/logaretm/vue-adaptive-utils)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/087bd788687c4ccab6650756ce56fa05)](https://www.codacy.com/app/logaretm/vue-adaptive-utils)\n[![npm](https://img.shields.io/npm/dm/vue-adaptive-utils.svg)](https://npm-stat.com/charts.html?package=vue-adaptive-utils)\n[![npm](https://img.shields.io/npm/v/vue-adaptive-utils.svg)](https://www.npmjs.com/package/vue-adaptive-utils)\n[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/logaretm/vue-adaptive-utils.svg)](http://isitmaintained.com/project/logaretm/vue-adaptive-utils 'Average time to resolve an issue')\n[![Percentage of issues still open](http://isitmaintained.com/badge/open/logaretm/vue-adaptive-utils.svg)](http://isitmaintained.com/project/logaretm/vue-adaptive-utils 'Percentage of issues still open')\n\n\u003c/p\u003e\n\u003cbr\u003e\n\n## What is this\n\nInspired by [react-adaptive-hooks](https://github.com/GoogleChromeLabs/react-adaptive-hooks), and a continuation of my work in [vue-use-web](https://github.com/logaretm/vue-use-web).\n\nThis is a collection of Vue 3.0 composition API functions and utilties to allow your apps to adapt your user's:\n\n- Network conditions.\n- Battery Status.\n- CPU Cores.\n- Device Memory.\n\nI have iterated on this idea multiple times, once in my article: [Resource-Adaptive Vue Apps](https://logaretm.com/blog/2019-07-19-resource-adaptive-vue-apps/) which discussed this idea prior to the introduction of the composition API, I have enhanced the idea even more in my work in [vue-use-web](https://github.com/logaretm/vue-use-web).\n\nWith the Vue 3.0 composition API introduction, this is a perfect way to consume such functionalities into your components. This library is aimed to Vue 3.0 and already working with the Alpha releases.\n\n## Why\n\nThis **is not** \"yet another web APIs wrappers for Vue's upcoming composition API\", this project aims to focus on only the APIs that allow you to tailor your website experience based on various factors like network status, device memory and more. It allows you to build \"adaptive\" vue applications that are aware of your users devices limitation and to be more empathetic towards them.\n\nThis library aims to bring value with those composition functions, not only mirroring the native web APIs that's underneath.\n\n## Install\n\n```sh\nyarn add vue-adaptive-utils\n\n# or\n\nnpm i vue-adaptive-utils --save\n```\n\n## Usage\n\nImport the composition function(s) that you will use:\n\n```js\nimport { useNetworkStatus } from 'vue-adaptive-utils';\nimport { useBattery } from 'vue-adaptive-utils';\nimport { useHardwareConcurrency } from 'vue-adaptive-utils';\nimport { useMemoryStatus } from 'vue-adaptive-utils';\n```\n\nAll of the composition functions return an `isSupported` boolean ref to indicate if the API is supported or not.\n\n\u003e ⚠ All the values exposed are **read only** and cannot be mutated.\n\n### Network Status\n\nThis is a **compounded API**, meaning it collects various information from multiple APIs, them being the `Connection API` and `online/offline` events.\n\n**Partial Compatibility**: The `isSupported` flag here refers to the availability of the `Connection API`, the `isOnline` and `offlineAt` properties should be available in all browsers.\n\n```js\nimport { useNetworkStatus } from 'vue-adaptive-utils';\n\nconst {\n  isOnline,\n  saveData,\n  offlineAt,\n  downlink,\n  downlinkMax,\n  effectiveConnectionType,\n  networkType,\n  isSupported\n} = useNetworkStatus();\n```\n\n### Battery Status\n\nThis is an experimental API and is only available on Chrome at the moment.\n\n```js\nimport { useBattery } from 'vue-adaptive-utils';\n\nconst { charging, chargingTime, dischargingTime, level, isSupported } = useBattery();\n```\n\n### Hardware Concurrency (CPU Cores)\n\n```js\nimport { useHardwareConcurrency } from 'vue-adaptive-utils';\n\nconst { concurrency, isSupported } = useHardwareConcurrency();\n```\n\n### Memory Status\n\nThis is a **compounded API**, meaning it collects various information from multiple APIs, mainly the `navigator.deviceMemory` and `navigator.performance`.\n\n```js\nimport { useHardwareConcurrency } from 'vue-adaptive-utils';\n\nconst { deviceMemory, totalJSHeapSize, usedJSHeapSize, jsHeapSizeLimit, isSupported } = useMemoryStatus();\n```\n\n## Browser Support\n\n- [Battery API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/battery) is only available on Chrome.\n- [Connection API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection) is available on Chrome 61+ and Firefox.\n- [Device Memory](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/deviceMemory) is available on Chrome 63+.\n- Performance memory API is a non-standard and only available in Chrome 7+, Opera, Chrome for Android 18+, Opera for Android.\n\n## 📚 Documentation\n\nYou can find the [docs here](https://logaretm.github.io/vue-adaptive-utils/).\n\n## 📜 License\n\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvue-adaptive-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogaretm%2Fvue-adaptive-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogaretm%2Fvue-adaptive-utils/lists"}