Usage
Learn how to use the nuxt-battery module in your Nuxt 3 application.
This module exposes composables that are auto-imported by Nuxt 3.
useBattery
This composable return info about your battery status.
<script setup lang="ts">const { status, // number - between 0 and 100 (-1 means the plugin still loading) charging, // boolean - true/false if it is charging or not time, // number - battery time remaining in minutes label // string - battery time remaining label } = useBattery()</script><nuxt-battery /> or <nuxt-battery-circle />
If you don't need to develop your own custom component, you can simply use this one to have a status battery.
simple
<template> <div> <nuxt-battery /> <nuxt-battery-circle /> </div></template>| Key | Type | Default | Description |
|---|---|---|---|
showLabel | boolean | false | If you need the remaining time label close to the battery icon |
showPercentage | boolean | false | If you need to show percentage in battery icon (and label) |
dark | boolean | false | Default battery icn border is white, choose dark if you need black |
colored | boolean | true | If you need to show green, yellow and red color in battery icon |
Table of Contents