title	lang	home	actionText	actionLink	features	footer	description	meta
useWeb	en-US	true	Get Started →	./functions/	title details Reactive All the APIs have been repurposed to be reactive so you can use them directly in your components. title details Graceful Degradation Sensible fallbacks are in place if the browser does support an API or the user doesn't give the permission. title details TypeScript Support Written in TypeScript.	MIT Licensed | Copyright © 2019-present Abdelrahman Awad	Web APIs implemented as Vue.js composition functions	name content og:title useWeb name content og:description Web APIs implemented as Vue.js composition functions

Quick Setup

Web APIs implemented as Vue.js composition functions. currently usable with the @vue/composition-api adapter for Vue.js 2.x.

Installation

# install with yarn
yarn add @vue/composition-api vue-use-web

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

Web APIs

• Battery Status API.
• Clipboard API.
• Device Light.
• Device Motion.
• Device Orientation.
• Document Visibility.
• Event Listener.
• Fetch API.
• Full-screen.
• Geo-location API.
• Hardware Concurrency.
• Intersection Observer.
• Local-storage API
• Media Query
• Memory Status.
• Mouse Position
• Network Information API.
• Preferred Color Scheme.
• Preferred Languages.
• Script.
• WebSocket.
• Window Scroll Position.
• Window Size.
• Worker.
• Notification.
• Bluetooth .
• Share .

Usage

<template>
  <div>User position is: {{ coords.longitude }} {{ coords.latitude }}</div>
</template>

<script>
import { useGeolocation } from 'vue-use-web';

export default {
  setup() {
    const { coords } = useGeolocation();

    return { coords };
  }
};
</script>