Pill Stepper in Vue.
A quantity picker in a pill. Press plus or minus and the digits roll to the new number, up for more and down for less, while the line total beside it rolls along. Hold a button and it keeps stepping, faster the longer you hold.
Install Pill Stepper in your Vue project
Pill Stepper ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.
Where it goes in your Vue app
Pill Stepper is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.
In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.
The component uses the <script setup> composition API and TypeScript-friendly defineProps.
Common questions
- Does Pill Stepper work in Nuxt 3?
- Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in
- Does Pill Stepper work with Vue 2?
- No - the component uses the Vue 3 Composition API and
Pill Stepper for Vue - GSAP component | Annnimate