Premium

Vue Like Button (Toggle + Counter)

By FrontendAtlas Team · Updated Jan 30, 2026

Create a Vue 3 Like button with a toggle state and visible counter. Clicking should increment on like, decrement on unlike, and never allow the count to drop below zero. The UI should immediately reflect the current state. Concepts: vue, components, reactivity. Include keyboard and…

Render a Like button and a like counter.
Clicking toggles between 'Like' and 'Liked'.

What you’ll build / What this tests

This premium vue coding focuses on Vue Like Button (Toggle + Counter). You’ll apply vue and components thinking with easy level constraints. The prompt emphasizes Create a Vue 3 Like button with a toggle state and visible counter. Clicking should increment….

Learning goals

Translate the prompt into a clear vue API signature and return shape.
Apply vue, components, reactivity techniques to implement vue like button (toggle + counter).
Handle easy edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in vue.

Key decisions to discuss

Define the exact input/output contract before coding.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Render a Like button and a like counter.
Clicking toggles between 'Like' and 'Liked'.
When toggling to liked: increment the counter by 1.
When toggling to unliked: decrement the counter by 1.
The counter must never go below 0.
Update button styling based on liked state.
Initial state: not liked, counter shows an initial value (e.g., 120).
Clicking toggles the label and active style.
Counter updates by +1 / -1 depending on toggle direction.
If the counter is 0, unliking should not make it negative.

Mini snippet (usage only)

// Example usage
const input = /* vue like button (toggle + counter) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.