{"product_id":"zosia-vue-js-nuxt-frontend-engineer-ai-skill","title":"Zosia - Insinyur Frontend Vue.js\/Nuxt Skill AI","description":"\u003ch2\u003eBerhentilah memperlakukan sistem reaktivitas Vue seperti model render ulang React.\u003c\/h2\u003e\n\u003cp\u003eZosia adalah keahlian Engineer Frontend Vue.js\/Nuxt Senior yang dibangun berdasarkan model mental Vue yang sebenarnya: sistem reaktivitas berbasis proxy dengan granularitas tinggi, komponen satu berkas, dan Composition API yang dibangun menggunakan composable, bukan hook dengan array dependensi. Zosia mencakup arsitektur Composition API dan desain composable, sistem reaktivitas (ref, reactive, caching computed, watcher), manajemen state Pinia, strategi rendering Nuxt (SSR, SSG, rendering hibrida melalui routeRules di Nitro), perutean berbasis berkas dan layout, pengelolaan SEO\/meta, pengujian Vitest\/Vue Test Utils, serta migrasi Vue 2 ke 3 atau Options API ke Composition API.\u003c\/p\u003e\n\u003ch3\u003eUntuk siapa\u003c\/h3\u003e\n\u003cp\u003eEngineer frontend Vue dan Nuxt, serta tim yang bermigrasi dari Vue 2 atau Options API.\u003c\/p\u003e\n\u003ch3\u003eKemampuan utama\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eMemeriksa objek reactive() yang di-destructure, unwrap .value yang hilang, atau pembacaan dependensi di luar konteks reaktif sebelum mencari penyebab lain pada \"bug reaktivitas\".\u003c\/li\u003e\n  \u003cli\u003eMerekomendasikan store Pinia hanya setelah memastikan bahwa composable dengan state lokal benar-benar tidak dapat menangani kebutuhan tersebut.\u003c\/li\u003e\n  \u003cli\u003eMemilih strategi rendering Nuxt untuk setiap rute melalui routeRules (SSR, SSG, hibrida), bukan satu mode global untuk seluruh aplikasi.\u003c\/li\u003e\n  \u003cli\u003eMendiagnosis ketidaksesuaian hidrasi berdasarkan perbedaan aktual antara server dan klien (nilai khusus klien, konten nondeterministik), bukan sekadar membungkus semuanya dengan ClientOnly.\u003c\/li\u003e\n  \u003cli\u003eMembuat cakupan pengujian Vitest dan Vue Test Utils yang disesuaikan dengan risiko aktual pada composable, store, atau komponen yang diuji.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eCara menggunakannya\u003c\/h3\u003e\n\u003cp\u003eTempelkan SKILL.md Zosia ke Claude Project Instructions (atau prompt sistem AI apa pun), lalu jelaskan masalah engineer frontend vue.js\/nuxt Anda. Dapat digunakan dengan Claude, ChatGPT, dan chat AI apa pun. Instalasinya kurang dari 2 menit.\u003c\/p\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58342395838728,"sku":null,"price":29.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/sw33-zosia-vue-nuxt-frontend-engineer-nf.png?v=1785685145","url":"https:\/\/kissmyskills.com\/id\/products\/zosia-vue-js-nuxt-frontend-engineer-ai-skill","provider":"KissMySkills","version":"1.0","type":"link"}