Belajar Vue - Memulai Proyek Vue

#Pendahuluan

Dua episode pertama membangun pemahaman konseptual. Sekarang waktunya tangan kotor: membuat proyek Vue sungguhan yang akan dipakai sebagai dasar praktikum sepanjang series. Di episode 3 kita membahas cara memulai proyek dengan Vite, memahami struktur folder yang dihasilkan, memanfaatkan dev server dengan hot module replacement, lalu memasang ESLint, Prettier, dan lint-staged.

Vite bukan sekadar scaffolding — dia adalah build tool modern yang menjadi standar resmi Vue. Dia menghadirkan dev server yang sangat cepat dengan native ES modules, tanpa bundle di development, dan build production yang dioptimalkan dengan Rollup. Semua episode koding selanjutnya akan berjalan di atas proyek yang kalian buat di sini.

#Membuat Aplikasi dengan Vite

#create-vue: Scaffolder Resmi

Gunakan create-vue, scaffolder resmi Vue yang menghasilkan project Vite lengkap dengan opsi ESLint, TypeScript, dan Router:

npm create vue@latest belajar-vue
cd belajar-vue
npm install
npm run dev

Jawab pertanyaan interaktif sesuai kebutuhan. Untuk series ini, aktifkan TypeScript, Vue Router, dan Pinia — semua akan kita pakai di episode selanjutnya. Setelah npm run dev, buka http://localhost:5173 dan kalian akan melihat halaman selamat datang Vue dengan logo hijau khasnya.

#Struktur Project Modern

Project yang dihasilkan memiliki struktur yang terorganisir:

belajar-vue/
├── index.html
├── vite.config.ts
├── package.json
└── src/
    ├── main.ts
    ├── App.vue
    ├── assets/
    ├── components/
    ├── views/
    └── router/

src/main.ts adalah titik masuk yang membuat application instance, src/App.vue adalah komponen akar, dan src/components menampung komponen yang bisa dipakai ulang.

#Struktur Folder: components dan views

#components untuk Unit, views untuk Halaman

Kebiasaan umum di ekosistem Vue: src/components berisi komponen kecil yang dapat dipakai ulang (button, card, form input), sedangkan src/views berisi komponen tingkat halaman yang mewakili satu route.

src/components/AppButton.vue
src/components/ProductCard.vue
src/views/HomeView.vue
src/views/ProductListView.vue

Perbedaan ini bukan aturan wajib, tapi konvensi yang membantu skala: views menyusun layout dan data halaman, sementara components menyembunyikan detail presentasi. Detail arsitektur yang lebih dalam akan kita bahas di episode 18.

#Membuat Komponen Pertama

Buat komponen sederhana dan pakai di App.vue:

Komponen kartu sederhana

<script setup>
defineProps({ judul: String, deskripsi: String });
</script>
 
<template>
  <article class="card">
    <h2>{{ judul }}</h2>
    <p>{{ deskripsi }}</p>
  </article>
</template>
 
<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}
</style>

Simpan sebagai src/components/InfoCard.vue lalu impor di App.vue. Perhatikan auto-import: Volar mendeteksi komponen yang dipakai di template tanpa deklarasi eksplisit.

#Dev Server dan Hot Module Replacement

#Kenapa Dev Server Vite Cepat

Vite memanfaatkan native ES modules di browser. Saat kalian membuka aplikasi, Vite hanya menyajikan module yang benar-benar diminta dan mengubahnya on-the-fly dengan esbuild. Tidak ada bundling penuh di development, sehingga server menyala hampir seketika dan modifikasi file tercermin dalam milidetik.

#Hot Module Replacement

Saat kalian menyimpan perubahan, HMR mengganti bagian yang berubah tanpa me-refresh halaman dan tanpa kehilangan state aplikasi. Coba ganti teks di komponen — kalian akan melihat update instan. Ini jauh lebih nyaman dibanding build-and-refresh manual.

npm run dev -- --port 4000

Flag --port di npm run dev -- --port 4000 memaksa dev server berjalan di port 4000. Di production, kalian bisa menambahkan env variable VITE_PORT untuk konfigurasi yang lebih fleksibel.

#ESLint, Prettier, dan lint-staged

#Menginstall dan Mengonfigurasi

Kualitas kode dijaga oleh tiga alat: ESLint mendeteksi error dan anti-pattern, Prettier menyeragamkan format, dan lint-staged menjalankan keduanya hanya pada file yang berubah sebelum commit:

npm install -D eslint prettier lint-staged
npm install -D eslint-plugin-vue

Untuk project yang dibuat dari create-vue, konfigurasi ESLint sudah tersedia. Pastikan script lint ada di package.json, lalu tambahkan hook pre-commit melalui husky:

npx husky init
echo "bunx lint-staged" > .husky/pre-commit

#Konfigurasi lint-staged

Definisikan lint-staged di package.json agar format dan lint berjalan sebelum commit:

{
  "lint-staged": {
    "*.{vue,ts,tsx,js}": ["eslint --fix", "prettier --write"]
  }
}

Dengan konfigurasi *.{vue,ts,tsx,js} di lint-staged, setiap file .vue atau .ts yang masuk staging otomatis diperbaiki ESLint lalu diformat Prettier sebelum commit berhasil. Ini mencegah kode berantakan masuk ke riwayat Git.

#Penutup

Episode 3 membawa kalian dari nol ke proyek Vue yang berjalan: scaffolding dengan Vite, struktur folder src/components dan src/views, dev server dengan hot module replacement yang instan, serta fondasi kualitas kode berupa ESLint, Prettier, dan lint-staged.

Inti yang harus dibawa pulang:

• npm create vue@latest adalah cara resmi memulai project Vue.
• src/components untuk unit kecil; src/views untuk halaman route.
• Vite memakai native ES modules sehingga dev server sangat cepat.
• HMR mengganti modul yang berubah tanpa me-refresh halaman.
• ESLint dan Prettier menjaga konsistensi kode tim.
• lint-staged dengan husky mengunci kualitas sebelum commit.

Di episode 4 selanjutnya kita masuk ke template dan rendering — sintaks template Vue, direktif v-bind, v-if, dan v-for, event handling dengan v-on, conditional dan list rendering, serta template refs dan dynamic attributes yang menjadi bahasa sehari-hari menulis UI Vue.