useBattery

Demo

isSupported: false
charging: false
chargingTime: 0
dischargingTime: 0
level: 1

Usage

import { useBattery
 } from '@vueuse/core'

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

State	Type	Description
isSupported	`Boolean`	If the Battery Status API is supported in the current browser.
charging	`Boolean`	If the device is currently charging.
chargingTime	`Number`	The number of seconds until the device becomes fully charged.
dischargingTime	`Number`	The number of seconds before the device becomes fully discharged.
level	`Number`	A number between 0 and 1 representing the current charge level.

Browser Support

The Battery Status API has limited browser support. It is currently only available in Chromium-based browsers. Always check isSupported before using the values.

Use-cases

Our applications normally are not empathetic to battery level, we can make a few adjustments to our applications that will be more friendly to low battery users.

Trigger a special "dark-mode" battery saver theme settings.
Stop auto playing videos in news feeds.
Disable some background workers that are not critical.
Limit network calls and reduce CPU/Memory consumption.

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue

<template>
  <UseBattery v-slot="{ isSupported
, charging
, level
 }">
    <div
 v-if="isSupported
">
      <p
>Is Charging: {{ charging
 }}</p
>
      <p
>Battery Level: {{ (level
 * 100).toFixed
(0) }}%</p
>
    </div
>
    <div
 v-else>
      Battery API not supported
    </div
>
  </UseBattery>
</template>

Type Declarations

export interface UseBatteryOptions extends ConfigurableNavigator {}
export interface UseBatteryReturn extends Supportable {
  charging
: ShallowRef
<boolean>
  chargingTime
: ShallowRef
<number>
  dischargingTime
: ShallowRef
<number>
  level
: ShallowRef
<number>
}
export interface BatteryManager extends EventTarget {
  charging
: boolean
  chargingTime
: number
  dischargingTime
: number
  level
: number
}
/**
 * Reactive Battery Status API.
 *
 * @see https://vueuse.org/useBattery
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useBattery
(
  options
?: UseBatteryOptions,
): UseBatteryReturn