Vue Academy · Lesson

useCounter: A Simple Composable

count ref, increment/decrement functions, reset, exposing only what's needed.

Building useCounter

We will write a small but complete composable: useCounter. It manages a number and exposes methods to change it - a perfect first composable.

Give the function an initial parameter with a default so callers can start the counter anywhere.

function useCounter(initial = 0) {
  // ...
}