List of useful device related vue composable from Vueuse library.

List of useful device related vue composable from Vueuse library.

List of useful device related vue composable from Vueuse library which will help you building your vue application fast.

Fazail Alam
Frontend dev · Wed Jun 29 2022

All composable in this list are from Vueuse library. There are many composable in this library.


This composable helps you to connect and interact with Bluetooth devices with the help of Web Bluetooth API. This gives us 5 variables and 1 function. There are 3 more options you can pass other than acceptAllDevices. Here’s full overview of browser compatibility. Official Docs

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,


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, text is reactive and contains the copied text, copy is a function and it accept a text parameter, copied is reactive boolean variable which will reset to false after copy and isSupported is a boolean variable which will be true if clipboard is supported. Official docs

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

const source = ref("Initial Text");
const { text, copy, copied, isSupported } = useClipboard({ source });
    <button @click="copy()">
        <!-- by default, `copied` will be reset in 1.5s -->
        <span v-if="!copied">Copy</span>
        <span v-else>Copied!</span>


This provides the ability to enter and exit full screen. This gives us 2 variables and 3 function, isFullscreen is a boolean variable which will be true if user is in full screen, enter is a function which will trigger full screen view, exit is a function which will trigger out from full screen, toggle 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

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

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


From this composable you can get permission status. Official docs

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

const microphoneAccess = usePermission("microphone");


Get orientation type(eg. portrait-primary,landscape-secondary,etc), angle of the orientation, lock or unlock orientation. Official docs

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();


This provides the detail of device’s physical orientation. Official docs

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

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


This composable make a way to prevent screen from dimming or locking the screen. Official docs

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

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


This gives you access to vibrate device in the pattern you define. Official docs

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:

// But if you want to stop it, you can:


This provides the battery level and charging status. Official docs

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

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


This gives you list of input/output devices. Official docs

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

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


This gives you access to location of the user if they grant permission. Location option like latitude, longitude, speed, heading, etc. Official docs

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

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


This gives you access to idle status. With below code if you don’t interact with screen idle value will become true. Official docs

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

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

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


This gives you access to network status. Status like network type, is online, etc. Official docs

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

const {
} = useNetwork();

Want frameworks news and updates?

Sign up for our newsletter to stay up to date.