Pernahkah kamu bingung kenapa codebase Vue 2 kamu makin lama makin susah di-maintain? Saya juga pernah ngalamin itu. Project lama pakai Options API, semua logic ditumpuk di satu file `export default`, dan tiap mau nambah fitur baru harus berdamai dulu dengan spaghetti code. Begitu project tumbuh, satu komponen bisa isinya ratusan baris dan urutan `data()`, `computed`, `methods`, `watch` bikin pusing.
Terus Vue 3 rilis dengan Composition API, dan semua berubah. Sekarang kamu bisa pisah-pisah logic per fitur, bukan per option type. Kombinasikan sama Pinia untuk state management, dan TypeScript untuk type safety, kamu dapet developer experience yang jauh lebih enak. Di tutorial ini saya mau ajak kamu bikin web app dari nol pakai stack ini.
Apa Itu Composition API dan Kenapa Pindah?
Di Options API (Vue 2 style), kamu deklarasi semua reactive data di `data()`, semua computed di `computed`, semua method di `methods`. Masalahnya saat satu komponen punya 3 fitur berbeda (misal: cart, wishlist, search), logic dari ketiga fitur itu tersebar di option-option yang berbeda. Mau lihat semua logic cart? Harus scroll dan scan antara `data`, `methods`, `computed` buat nyari yang relate ke cart.
Composition API ngerjain hal beda. Kamu bikin `setup()` function (atau pakai `