Nuxt Battery module

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

• 📖  Read the documentation
• 💥  Try the demo

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

::code-group

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

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

4. Start development server using yarn dev or npm run dev

License

MIT License