Nuxt Battery module

A simple Nuxt 3 module to show info about your battery device.

npm version npm downloads License

nuxt-battery

Features

  • Nuxt 3 with composables
  • Nuxt 3 component battery-status imported automatically
  • TypeScript support

Install

Add nuxt-battery dev dependency to your project:

yarn add nuxt-battery

Then, add nuxt-battery to the modules section of your Nuxt configuration:

export default {
  modules: ['nuxt-battery'],
}

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 />

If you don’t need to develop your own custom component, you can simply use this one to have a status battery.

::code-group

<template>
  <div>
    <nuxt-battery />
  </div>
</template>

<template>
  <div>
    <nuxt-battery
      :show-label
      :show-percentage
      :dark
      :colored
    />
  </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

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Build module using yarn build or npm run build to build once
  • Use yarn build --stub or npm run build --stub during active development
  1. Start development server using yarn dev or npm run dev

License

MIT License

GitHub

View Github