Memulai Proyek Vue

Untuk memulai pengembangan aplikasi Vue, kamu disediakan dua jalur utama. Jalur pertama adalah melalui penyertaan tautan Content Delivery Network langsung di berkas HTML. Pendekatan ini sangat praktis untuk keperluan eksperimen cepat, materi pembelajaran dasar, atau sekadar menambahkan interaktivitas kecil pada situs web tanpa proses kompilasi. Namun, jalur ini tidak mendukung penggunaan Single File Component. Untuk pembuatan aplikasi dunia nyata, pendekatan standar yang direkomendasikan adalah menggunakan perkakas berbasis Node Package Manager dan Vite dengan menjalankan perintah scaffolding npm create vue@latest.

Ketika proyek baru dibuat, Vite menyusun struktur folder yang rapi dan terorganisasi. Berkas index.html di tingkat akar menjadi pintu gerbang utama aplikasi browser. Folder src/ menampung seluruh kode sumber aplikasi, dimulai dari main.js sebagai titik masuk yang menginisialisasi instans aplikasi Vue dan menempelkannya ke elemen DOM. Komponen pembungkus paling atas adalah App.vue, yang kemudian memuat komponen lain dari direktori components/ untuk modul yang dapat digunakan ulang, views/ untuk halaman yang terhubung dengan routing, serta stores/ untuk konfigurasi state global Pinia. Pengembang juga dapat memanfaatkan tanda alias @ yang secara baku merujuk ke folder src/ guna mempersingkat jalur impor berkas.

Kekuatan utama arsitektur Vue terletak pada berkas Single File Component berekstensi .vue. Satu berkas ini menyatukan tiga aspek pembangun antarmuka ke dalam blok terpisah: blok script untuk logika dan pengolahan data, blok template untuk struktur tampilan HTML, serta blok style scoped untuk aturan perwajahan CSS. Atribut scoped pada blok style menjamin isolasi gaya visual, artinya CSS yang kamu tulis di komponen tersebut tidak akan merembes dan merusak tampilan komponen lain di dalam aplikasi.

<script setup>
import { ref } from "vue";
const counter = ref(0);
const naikkan = () => counter.value++;
</script>

<template>
  <div class="panel">
    <p>Nilai: {{ counter }}</p>
    <button @click="naikkan">Tambah</button>
  </div>
</template>

<style scoped>
.panel {
  padding: 12px;
  border: 1px solid #ddd;
}
</style>

Dalam menuliskan logika komponen, kamu akan menjumpai dua gaya penulisan, yaitu Options API dan Composition API. Options API mengelompokkan kode berdasarkan opsi objek seperti data, methods, computed, dan mounted. Gaya ini mudah dipahami oleh pemula, namun pada komponen berskala besar, kode yang menangani satu fitur bisnis yang sama bisa terpecah di berbagai bagian opsi yang berjauhan. Untuk mengatasi kendala tersebut, Vue 3 menghadirkan Composition API dengan sintaks script setup. Pendekatan ini memungkinkan kamu mengelompokkan kode berdasarkan keterkaitan fungsi logikanya secara modular, mempermudah pembuatan logika reusable, serta menyajikan inferensi tipe data TypeScript yang jauh lebih mulus tanpa perlu menulis boilerplate export default atau return secara eksplisit.