# vue3-odometer-counter

> Vue.js(v3.2+) component wrap for Odometer.js

Latest version **0.0.9** (published 2024-01-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-odometer-counter
pnpm add vue3-odometer-counter
yarn add vue3-odometer-counter
bun add vue3-odometer-counter
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2024-01-11 |
| First published | 2023-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | huangwantong |
| Maintainers | max_wagner |
| Keywords | odometer, odometer.js, library, vue, vue-odometer |

## Links

- npm: https://www.npmjs.com/package/vue3-odometer-counter
- Repository: https://github.com/maryasov/vue3-odometer-counter
- Issues: https://github.com/maryasov/vue3-odometer-counter/issues
- npm.io page: https://npm.io/package/vue3-odometer-counter

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.25
- [odometer-counter](https://npm.io/package/odometer-counter.md) ^0.0.4

## Recent versions

- 0.0.9 (latest) — 2024-01-11
- 0.0.8 — 2024-01-11
- 0.0.7 — 2023-12-24
- 0.0.6 — 2023-12-24
- 0.0.5 — 2023-12-24
- 0.0.4 — 2023-12-24
- 0.0.3 — 2023-12-24
- 0.0.2 — 2023-12-24

## README

# vue3-odometer-counter

> Vue.js(v3.2+) component wrap for Odometer.js

> Forked from [vangleer/vue3-odometer](https://github.com/vangleer/vue3-odometer)
 
## Installation

``` bash
npm install --save odometer-counter vue3-odometer-counter
```

## Usage
``` vue
<template>
  <Vue3Odometer class="o-text" :value="number" />
  <button @click="update">update number</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Vue3Odometer from 'vue3-odometer-counter'
import 'odometer-counter/themes/odometer-theme-main.css'
const number = ref(100)

function update() {
  number.value = Math.floor(Math.random() * 1000)
}
</script>

<style>
.o-text {
  color: red;
}
</style>
```

## Properties

* `value` **[Number]**

  Optional; `0` by default.

* `format` **[String]**

  Optional;

* `theme` **[String]**

  Optional; `default` by default.

* `duration` **[Number]**

  Optional;

* `animation` **[String]**

  Optional;

* `formatFunction` **[Function]**

  Optional;

See more [Odometer.js](http://github.hubspot.com/odometer/)

## Methods

* `renderInside`
* `watchForMutations`
* `startWatchingMutations`
* `stopWatchingMutations`
* `cleanValue`
* `bindTransitionEnd`
* `resetFormat`
* `renderDigit`
* `formatDigits`
* `insertDigit`
* `addDigit`
* `addSpacer`
* `animate`
* `animateCount`
* `getDigitCount`
* `getFractionalDigitCount`
* `resetDigits`
* `animateSlide`
* `render`
* `update`

Learn more [Odometer.js](http://github.hubspot.com/odometer/)


# License

MIT

---
_Source: https://npm.io/package/vue3-odometer-counter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._