List of useful device related vue composable from Vueuse library.
Tags: vue, vueuse
Published: 2022-08-15 11:57:48

---
title: List of useful device related vue composable from Vueuse library.
published: true
date: 2022-06-29 00:00:00 UTC
tags: ['vuejs','vueuse']
canonical_url: https://www.codef.site//blog/vuejs/list-of-useful-device-related-vue-composable-from-vueuse-libraray
---

!["list of device related vueuse composable"](https://www.codef.site/img/vuejs/device_list_vueuse.png)
All composable in this list are from [Vueuse](https://vueuse.org/) library. There are many composable in this library.

## useBluetooth

This composable helps you to connect and interact with Bluetooth devices with the help of [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API). This gives us 5 variables and 1 function. There are 3 more options you can pass other than acceptAllDevices. [Here's](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility) full overview of browser compatibility. [Official Docs](https://vueuse.org/core/useBluetooth)

```js
import { useBluetooth } from "@vueuse/core";

const {
    isSupported, // check if bluetooth is supported
    isConnected, // check if connected, reactive
    device, // device object, reactive
    requestDevice, // function to request device, returns a promise
    server, // handle services, reactive
    error // error helper, reactive
} = useBluetooth({
    acceptAllDevices: true,
    ...
});
```

## useClipboard

This provides the ability to **copy** , **cut** and **paste** text from clipboard. It can asynchronously read and write from system clipboard. This needs user permission for clipboard access. This gives us 3 variables and 1 function, <code-inline>text</code-inline> is reactive and contains the copied text, <code-inline>copy</code-inline> is a function and it accept a text parameter, <code-inline>copied</code-inline> is reactive boolean variable which will reset to false after copy and <code-inline>isSupported</code-inline> is a boolean variable which will be true if clipboard is supported. [Official docs](https://vueuse.org/core/useClipboard/)

```js
import { useClipboard } from "@vueuse/core";

const source = ref("Initial Text");
const { text, copy, copied, isSupported } = useClipboard({ source });

<template>
    <button @click="copy()">
        <!-- by default, `copied` will be reset in 1.5s -->
        <span v-if="!copied">Copy</span>
        <span v-else>Copied!</span>
    </button>
</template>
```

## useFullscreen

This provides the ability to **enter** and **exit** full screen. This gives us 2 variables and 3 function, <code-inline>isFullscreen</code-inline> is a boolean variable which will be true if user is in full screen, <code-inline>enter</code-inline> is a function which will trigger full screen view, <code-inline>exit</code-inline> is a function which will trigger out from full screen, <code-inline>toggle</code-inline> is a function which will toggle full screen and `isSupported` is a boolean variable which will be true if full screen is supported. You can also pass html element(eg. `<video />`) to `useFullscreen()` to make a specified element full screen. [Official docs](https://vueuse.org/core/useFullscreen/)

```js
import { useFullscreen } from "@vueuse/core";

const { isFullscreen, enter, exit, toggle } = useFullscreen();
```

## usePermission

From this composable you can get permission status. [Official docs](https://vueuse.org/core/usePermission/)


```js
import { usePermission } from "@vueuse/core";

const microphoneAccess = usePermission("microphone");
```

## useScreenOrientation

Get orientation type(eg. portrait-primary,landscape-secondary,etc), angle of the orientation, lock or unlock orientation. [Official docs](https://vueuse.org/core/useScreenOrientation/)

```js 
import { useScreenOrientation } from "@vueuse/core";

const {
    isSupported, // boolean
    orientation, //orientation type, reactive
    angle, // orientation angle, reactive
    lockOrientation, // lock orientation, accepts orientation type, function
    unlockOrientation, // unlock orientation, function
} = useScreenOrientation();
```

## useDeviceOrientation

This provides the detail of device's physical orientation. [Official docs](https://vueuse.org/core/useDeviceOrientation/)

```js 
import { useDeviceOrientation } from "@vueuse/core";

const {
    isAbsolute,
    alpha, // z-axis, range: 0-360
    beta, // x-axis, range: -180 to 180
    gamma, // y-axis, range: -90 to 90
} = useDeviceOrientation();
```

## useWakeLock

This composable make a way to prevent screen from dimming or locking the screen. [Official docs](https://vueuse.org/core/useWakeLock/)

```js
import { useWakeLock } from "@vueuse/core";

const { isSupported, isActive, request, release } = useWakeLock();
```

## useVibrate

This gives you access to vibrate device in the pattern you define. [Official docs](https://vueuse.org/core/useVibrate/)

```js 
import { useVibrate } from "@vueuse/core";

// This vibrates the device for 300 ms
// then pauses for 100 ms before vibrating the device again for another 300 ms:
const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] });

// Start the vibration, it will automatically stop when the pattern is complete:
vibrate();

// But if you want to stop it, you can:
stop();
```

## useBattery

This provides the battery level and charging status. [Official docs](https://vueuse.org/core/useBattery/)

```js 
import { useBattery } from "@vueuse/core";

const { charging, chargingTime, dischargingTime, level } = useBattery();
```

## useDevicesList

This gives you list of input/output devices. [Official docs](https://vueuse.org/core/useDevicesList/)

```js
import { useDevicesList } from "@vueuse/core";

const {
    devices,
    videoInputs: cameras,
    audioInputs: microphones,
    audioOutputs: speakers,
} = useDevicesList();
```

## useGeolocation

This gives you access to location of the user if they grant permission. Location option like latitude, longitude, speed, heading, etc. [Official docs](https://vueuse.org/core/useGeolocation/)

```js
import { useGeolocation } from "@vueuse/core";

const { coords, locatedAt, error } = useGeolocation();
```

## useIdle

This gives you access to idle status. With below code if you don't interact with screen idle value will become true. [Official docs](https://vueuse.org/core/useIdle/)

```js
import { useIdle } from "@vueuse/core";

const { idle, lastActive } = useIdle(5 * 1000); // 5 seconds

console.log(idle.value); // true or false
```

## useNetwork

This gives you access to network status. Status like network type, is online, etc. [Official docs](https://vueuse.org/core/useNetwork/)

```js
import { useNetwork } from "@vueuse/core";

const {
    isOnline,
    offlineAt,
    downlink,
    downlinkMax,
    effectiveType,
    saveData,
    type,
} = useNetwork();
```