Fazail Alam

Posted on Aug 15, 2022 • Originally published at codef.site on Jun 29, 2022

List of useful device related vue composable from Vueuse library.

#vue #vueuse

All composable in this list are from Vueuse 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. 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,
    ...
});

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, 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 });

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

usePermission

From this composable you can get permission status. Official docs

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

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

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

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

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

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

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

useDevicesList

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

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

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

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

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

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

Top comments (1)

React Hunter • Mar 9 '23

vueuse is great!
thank you

DEV Community