asadmalik

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

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

asadmalik

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

const microphoneAccess = usePermission("microphone");
const accelerometer = usePermission('accelerometer')
const accessibilityEvents = usePermission('accessibility-events')
const ambientLightSensor = usePermission('ambient-light-sensor')
const backgroundSync = usePermission('background-sync')
const camera = usePermission('camera')
const clipboardRead = usePermission('clipboard-read')
const clipboardWrite = usePermission('clipboard-write')

asadmalik

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

asadmalik

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

asadmalik

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

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

asadmalik

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

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

asadmalik

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

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

asadmalik

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

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

asadmalik

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

asadmalik

<style>
.tree{
  --spacing : 1.5rem;
  --radius  : 10px;
}

.tree li{
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);