Saturday, 28 January, 2023 UTC

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

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

Summary

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

... more @ vuejsexamples.com

vuejsexamples.com