1---
2category: Utilities
3---
4 
5# useCounter
6 
7Basic counter with utility functions.
8 
9## Basic Usage
10 
11```ts
12import { useCounter } from '@vueuse/core'
13 
14const { count, inc, dec, set, reset } = useCounter()
15```
16 
17## Usage with options
18 
19```ts
20import { useCounter } from '@vueuse/core'
21 
22const { count, inc, dec, set, reset } = useCounter(1, { min: 0, max: 16 })
23```
24 
25## Type Declarations
26 
27```ts
28export interface UseCounterOptions {
29  min?: number
30  max?: number
31}
32export interface UseCounterReturn {
33  /**
34   * The current value of the counter.
35   */
36  readonly count: Readonly<Ref<number>>
37  /**
38   * Increment the counter.
39   *
40   * @param {number} [delta=1] The number to increment.
41   */
42  inc: (delta?: number) => void
43  /**
44   * Decrement the counter.
45   *
46   * @param {number} [delta=1] The number to decrement.
47   */
48  dec: (delta?: number) => void
49  /**
50   * Get the current value of the counter.
51   */
52  get: () => number
53  /**
54   * Set the counter to a new value.
55   *
56   * @param val The new value of the counter.
57   */
58  set: (val: number) => void
59  /**
60   * Reset the counter to an initial value.
61   */
62  reset: (val?: number) => number
63}
64/**
65 * Basic counter with utility functions.
66 *
67 * @see https://vueuse.org/useCounter
68 * @param [initialValue]
69 * @param options
70 */
71export declare function useCounter(
72  initialValue?: MaybeRef<number>,
73  options?: UseCounterOptions,
74): {
75  count: Readonly<
76    | Ref<number, number>
77    | ShallowRef<number, number>
78    | WritableComputedRef<number, number>
79  >
80  inc: (delta?: number) => number
81  dec: (delta?: number) => number
82  get: () => number
83  set: (val: number) => number
84  reset: (val?: number) => number
85}
86```
87