Vue Heart Like Button

1<template>
2  <button
3    class="like"
4    :class="{ liked }"
5    :aria-pressed="liked ? 'true' : 'false'"
6    @click="toggle"
7  >
8    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
9      <path
10        d="M12 21s-6.7-4.6-9.3-8.4C.5 9.4 1.7 5.5 5 4.5c2-.6 4.1.2 5.3 1.9l1.7 2.3 1.7-2.3c1.2-1.7 3.3-2.5 5.3-1.9 3.3 1 4.5 4.9 2.3 8.1C18.7 16.4 12 21 12 21z"
11        :fill="liked ? '#fb7185' : 'none'"
12        :stroke="liked ? '#fb7185' : '#a8a6b8'"
13        stroke-width="1.8"
14      />
15    </svg>
16    <span class="count">{{ count }}</span>
17  </button>
18</template>
19
20<script>
21export default {
22  data: () => ({ liked: false, count: 128 }),
23  methods: {
24    toggle() {
25      this.liked = !this.liked;
26      this.count += this.liked ? 1 : -1;
27    },
28  },
29};
30</script>
31
32<style>
33.like {
34  display: inline-flex;
35  align-items: center;
36  gap: 10px;
37  padding: 12px 22px;
38  border: 1px solid rgba(255, 255, 255, 0.14);
39  border-radius: 999px;
40  background: rgba(255, 255, 255, 0.04);
41  color: #e7e5ef;
42  font: 600 15px system-ui, sans-serif;
43  cursor: pointer;
44  transition: border-color 0.2s ease, background 0.2s ease;
45}
46.like:hover { border-color: rgba(251, 113, 133, 0.5); }
47.like:focus-visible { outline: 2px solid #fda4af; outline-offset: 3px; }
48.like.liked svg { animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
49.count { min-width: 3ch; text-align: left; font-variant-numeric: tabular-nums; }
50@keyframes pop {
51  0% { transform: scale(0.6); }
52  60% { transform: scale(1.25); }
53  100% { transform: scale(1); }
54}
55@media (prefers-reduced-motion: reduce) {
56  .like.liked svg { animation: none; }
57}
58</style>