use-persistent-stopwatch

Persistent stopwatch Vue composable


Keywords
composition-api, utility-library, vue, vue2, vue3
License
MIT
Install
npm install use-persistent-stopwatch@1.2.0

Documentation

Artwork by David Ko

use-persistent-stopwatch

A Vue composable bringing storage persisted stopwatches to your apps compatible with Vue 2 & 3.

Features

  • Multiple instances referenced by a key.
  • Persistence through sessions and tabs using storage.
  • Pausable/resumable.
  • Fully typed with TypeScript.
  • Compatible with Vue 2 and 3 (thanks to vue-demi).
  • Super small (<2kB).

🧱 Prerequisites

  • Vue 2: you need the Composition API plugin installed (>=1.1.0).
  • Vue 3: you don't need anything else than Vue (>=3.2.0).

⚙️ Installing

For Yarn users:

yarn add use-persistent-stopwatch

For Npm users:

npm install use-persistent-stopwatch

🚀 Usage

Basic usage

Simply import the composable and call it in your setup() function:

<script lang="ts">
import usePersistentStopwatch from 'use-persistent-stopwatch'

export default defineComponent({
  setup() {
    const { elapsed, pause, resume, reset } = usePersistentStopwatch('cute-watch')

    return { elapsed, pause, resume, reset }
  }
})
</script>

<template>
  <div>
    <span :style="{ color: running ? 'green' : 'red' }">elapsed time: {{ elapsed }}</span>
    <button @click="resume">resume</button>
    <button @click="pause">pause</button>
    <button @click="reset">reset</button>
  </div>
</template>

Multiple stopwatches

You can create multiple independent stopwatches by using different keys:

<script lang="ts">
import usePersistentStopwatch from 'use-persistent-stopwatch'

export default defineComponent({
  setup() {
    const { elapsed: elapsedOne, pause: pauseOne, resume: resumeOne } = usePersistentStopwatch('watch-one')
    const { elapsed: elapsedTwo, pause: pauseTwo, resume: resumeTwo } = usePersistentStopwatch('watch-two')

    return { elapsedOne, elapsedTwo, pauseOne, pauseTwo, resumeOne, resumeTwo }
  }
})
</script>

🤝 Contributing

Any contribution to the project is welome.
Run into a problem? Open an issue.
Want to add some feature? PRs are welcome!

👤 About the author

Feel free to contact me:

📝 Licence

Copyright © 2021 Sacha Bouillez.
This project is under MIT license.