Vue Counter (Guarded Decrement)

easy

By FrontendAtlas Team · Updated Jan 30, 2026

Build a Vue 3 counter component with increment/decrement and a zero floor. Use reactive state and guard the decrement so it never goes negative. Call out disabled states and clean template logic. Concepts: vue, components, reactivity, event handlers, basics. Framework focus: Vue SFC patterns, ref/reactive state, computed/watch, and v-model bindings.

Vue 3 Composition API (`ref`, `computed`) Basic component structure Click event handlers Guarded state updates

Requirements

Render the counter UI as the main component.
Display the current count value.
Provide '+' and '−' buttons to increment and decrement.
Prevent the count from ever going below 0.
Include a 'Reset' button that sets the count back to 0.

Expected behavior

Initial count starts at 0.
Clicking '+' increases the count by 1.
Clicking '−' decreases the count by 1, but never below 0.
Clicking 'Reset' sets the count back to 0.
The '−' button is disabled when the count is 0.

Implementation notes

Use Vue 3's Composition API with `ref` to store the count.
Use a `computed` property to determine when the count is zero and disable the decrement button.
Keep everything in a single `<App.vue>` component for this exercise.

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions Open Vue prep path

Files

Select a file

No preview yet. Click “Rebuild preview”.