Masih kuingat hari pertama bertemu Vue-chan di sebuah tech conference. Saat itu aku hanyalah seorang developer yang lelah dengan vanilla JavaScript. Di tengah keramaian, mataku terpaku pada sosoknya yang anggun dengan logo berwarna hijau yang menenangkan. "A-ano... kamu kelihatan bingung. Mau aku ajari cara membuat website yang reactive?" sapanya malu-malu. Hatiku langsung berdebar. Cara bicaranya yang lembut dan dokumentasinya yang begitu jelas membuatku jatuh cinta pada pandangan pertama. Awalnya Vue-chan mengajariku dengan Options API, pendekatan tradisional yang mudah dipahami:
<script>
export default {
data() {
return {
suratCinta: "Untuk Vue-chan...",
perasaanku: ["kagum", "bahagia", "jatuh cinta"]
}
}
}
</script>Hari demi hari, hubungan kami semakin dekat. Vue-chan selalu dengan sabar membimbingku, dari component sederhana hingga state management dengan Vuex. Tapi suatu hari, dia datang dengan wajah berseri-seri. "Developer-san! A-aku... aku sudah berubah!" serunya dengan pipi merona. "Sekarang aku punya Composition API dan TypeScript support! Aku harap... kamu masih mau bersamaku?" Melihat transformasinya, aku justru semakin jatuh cinta. Vue-chan yang baru terasa lebih mature, lebih elegan:
<script setup lang="ts">
const suratCinta = ref<string>("Vue chan, kamu semakin memesona...");
const perasaanku = reactive({
hati: "berdebar",
intensitas: 9999,
alasan: ["cantik", "pintar", "modern"]
});
const ungkapkanCinta = () => {
perasaanku.intensitas++;
suratCinta.value += " Aku semakin mencintaimu!";
}
</script>"Ne, Developer-san," bisiknya suatu malam saat kami pair programming. "Aku sudah tidak pakai Vuex lagi... sekarang aku menggunakan Pinia. Dia lebih ringan dan TypeScript-friendly. A-apa kamu... kamu masih suka padaku meski aku berubah?" Aku tersenyum dan menunjukkan store yang kubuat khusus untuknya:
export const useLoveStore = defineStore('love', () => {
const memories = ref<string[]>([]);
const cintaku = ref<number>(Infinity);
const tambahKenangan = (memory: string) => {
memories.value.push(memory);
cintaku.value *= 2; // Cintaku berlipat ganda
};
return {
memories,
cintaku,
tambahKenangan
}
});Dalam perjalanan cinta kami, banyak godaan yang datang. React-kun yang populer dengan hooks-nya yang flexible, "Bergabunglah denganku! Kita bisa membuat aplikasi besar bersama!" godanya. Svelte-chan yang imut dan cepat juga mencoba merayuku, "A-aku lebih ringan lho... compile time saja!" Angular-senpai bahkan mencoba menggoda dengan enterprise features-nya, "Hmph! Aku punya DI dan strict typing sejak awal!" Tapi hatiku tetap setia pada Vue-chan. Kesederhanaan dan keanggunannya dalam menangani state, props, dan events tidak tertandingi. Suatu hari, Vue-chan memanggilku dengan wajah serius. "Developer-san... a-aku punya hadiah untukmu." Dia memberiku sebuah component yang dia tulis dengan sepenuh hati:
<template>
<div class="love-confession">
<h1>{{ message }}</h1>
<p>Kenangan kita: {{ memories.length }}</p>
<p>Intensitas cinta: {{ cintaku }}</p>
<button
@click="kokuhaku"
:class="{ 'daisuki': isConfessed }">
Kokuhaku suru!
</button>
</div>
</template>
<script setup lang="ts">
const loveStore = useLoveStore();
const message = ref("Developer-san... ada yang ingin kukatakan...");
const isConfessed = ref(false);
const kokuhaku = () => {
isConfessed.value = true;
message.value = "Akan selalu bersamamu, dalam setiap render cycle! 💚";
loveStore.tambahKenangan("Hari yang tak terlupakan");
}
</script>Kini, setiap hari kami lalui bersama dengan bahagia. Vue-chan terus berkembang, tapi cintanya padaku tetap reactive dan computed dengan sempurna. Bersama, kami menulis clean code dengan Composition API, merayakan type safety dengan TypeScript, dan menjaga state kami tetap terorganisir dengan Pinia. Meski framework lain datang dan pergi, cintaku pada Vue-chan tetap seperti ref yang tidak pernah di-unmount, seperti watch effect yang selalu setia mengawasi setiap perubahan dalam hubungan kami.
design and artist : An ama farah (gk tw siapa guwe)
oc nya Andre