Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/logaretm/vue-use-web

🕸 Web APIs implemented as Vue.js composition functions
https://github.com/logaretm/vue-use-web

composition-api essential hooks utility-library vue vue-next vuejs

Last synced: about 2 months ago
JSON representation

🕸 Web APIs implemented as Vue.js composition functions

Host: GitHub
URL: https://github.com/logaretm/vue-use-web
Owner: Tarektouati
License: mit
Created: 2019-09-13T13:45:54.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-03-04T04:43:36.000Z (over 1 year ago)
Last Synced: 2024-06-15T04:40:06.587Z (3 months ago)
Topics: composition-api, essential, hooks, utility-library, vue, vue-next, vuejs
Language: TypeScript
Homepage: https://tarektouati.github.io/vue-use-web/
Size: 3.52 MB
Stars: 753
Watchers: 11
Forks: 42
Open Issues: 57
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-vue-3 - vue-use-web - 🕸 Web APIs implemented as Vue.js composition functions (Packages)

README

        # vue-use-web



![Github Actions](https://img.shields.io/github/workflow/status/TarekTouati/vue-use-web/Lint%20and%20test/master?style=flat-square)

![Codacy grade](https://img.shields.io/codacy/grade/866989b53305443f9b1cdeb646b33d4c?style=flat-square)

![npm](https://img.shields.io/npm/v/vue-use-web?style=flat-square)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-use-web?style=flat-square)

![npm](https://img.shields.io/npm/dm/vue-use-web?style=flat-square)

[![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)



Web APIs implemented as Vue.js composition functions.

This 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

You can use them with Vue 2.0 using [@vue/composition-api](https://github.com/vuejs/composition-api) until Vue 3.0 gets out.

## What and why

Web 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.

I 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.

## Installation

```bash

# install with yarn

yarn add @vue/composition-api vue-use-web

# install with npm

npm install @vue/composition-api vue-use-web

```

## Usage

[Kindly Check the documentation for examples](https://Tarektouati.github.io/vue-use-web/).

## APIs

Each 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.

- [Battery Status API](https://Tarektouati.github.io/vue-use-web/functions/battery.html).

- [Clipboard API](https://Tarektouati.github.io/vue-use-web/functions/clipboard.html).

- [Device Light](https://Tarektouati.github.io/vue-use-web/functions/device-light.html).

- [Device Motion](https://Tarektouati.github.io/vue-use-web/functions/device-motion.html).

- [Device Orientation](https://Tarektouati.github.io/vue-use-web/functions/device-orientation.html).

- [Event Listener](https://Tarektouati.github.io/vue-use-web/functions/event-listener.html).

- [Fetch API](https://Tarektouati.github.io/vue-use-web/functions/fetch.html).

- [Full-screen](https://Tarektouati.github.io/vue-use-web/functions/fullscreen.html).

- [Geo-location API](https://Tarektouati.github.io/vue-use-web/functions/geolocation.html).

- [Hardware Concurrency](https://Tarektouati.github.io/vue-use-web/functions/hardware-concurrency.html)

- [Intersection Observer](https://Tarektouati.github.io/vue-use-web/functions/intersection-observer.html).

- [Localstorage API](https://Tarektouati.github.io/vue-use-web/functions/local-storage.html)

- [Media Query](https://Tarektouati.github.io/vue-use-web/functions/media-query.html)

- [Mouse Position](https://Tarektouati.github.io/vue-use-web/functions/mouse-position.html)

- [Network Information API](https://Tarektouati.github.io/vue-use-web/functions/network.html).

- [Preferred Color Scheme](https://Tarektouati.github.io/vue-use-web/functions/preferred-color-scheme.html).

- [Preferred Languages](https://Tarektouati.github.io/vue-use-web/functions/preferred-languages.html).

- [Script](https://Tarektouati.github.io/vue-use-web/functions/script.html).

- [WebSocket](https://Tarektouati.github.io/vue-use-web/functions/websocket.html).

- [Window Scroll Position](https://Tarektouati.github.io/vue-use-web/functions/scroll-position.html).

- [Window Size](https://Tarektouati.github.io/vue-use-web/functions/window-size.html).

- [Worker](https://Tarektouati.github.io/vue-use-web/functions/worker.html).

- [Notification](https://Tarektouati.github.io/vue-use-web/functions/worker.html).

- [Media Devices](https://Tarektouati.github.io/vue-use-web/functions/device-media.html).

- Bluetooth (TODO).

- Share (TODO).

- ResizeObserver (WIP)

## Inspiration

This library is inspired by [the-platform](https://github.com/palmerhq/the-platform) and [standard-hooks](https://github.com/kripod/standard-hooks) for React.js.

## License

MIT