Vue JS Adalah: Pengertian, Cara Kerja & Kekurangannya

Halaman HTML yang Anda tulis bersifat tetap. Teksnya sudah ditentukan sejak berkas disimpan, dan browser hanya menampilkan apa adanya. Persoalan muncul begitu halaman perlu menampilkan sesuatu yang berubah — jumlah barang di keranjang belanja, sisa stok, atau nama pengguna yang sedang login.

Jalan keluar yang lazim adalah menambal isi halaman lewat JavaScript. Cara ini terasa cepat bagi pengguna, tetapi menyimpan jebakan. Satu angka yang sama sering muncul di beberapa tempat sekaligus: di badge keranjang, di ringkasan pesanan, dan di tombol checkout. Anda harus memperbaruinya satu per satu setiap kali datanya bergeser. Ketika satu tempat terlewat, tampilan berbohong kepada pengguna.

Vue JS adalah cara keluar dari pekerjaan menambal itu. Anda cukup menyatakan bagian halaman mana yang bergantung pada data mana, lalu Vue menjaga agar keduanya tidak pernah berbeda.

Vue JS Adalah Framework Progresif untuk Antarmuka Web

Vue JS adalah framework JavaScript untuk membangun antarmuka pengguna (user interface). Namanya dilafalkan seperti kata "view" dalam bahasa Inggris. Vue tidak menciptakan bahasa baru; ia berdiri di atas HTML, CSS, dan JavaScript standar, lalu menambahkan sintaks template dan sistem komponen di atasnya.

Anda akan menemukan tiga penulisan: Vue, Vue.js, dan VueJS. Ketiganya merujuk pada hal yang sama persis. Dokumentasi resminya memakai "Vue", sedangkan "Vue JS" lebih sering muncul saat orang mencarinya di mesin pencari.

Pertanyaan yang hampir selalu menyusul adalah apakah Vue JS adalah framework atau library. Jawabannya framework, dan pembedanya terletak pada siapa yang memegang kendali. Sebuah library Anda panggil kapan pun dibutuhkan. Sebuah framework justru memanggil kode Anda, sekaligus menentukan bentuk proyeknya. Perbedaan ini kami bahas lebih rinci di artikel tentang apa itu framework.

Vue menyebut dirinya progressive framework, dan istilah ini punya arti praktis. Anda boleh memakai Vue sedikit saja, cukup satu tag script di halaman HTML lama tanpa perkakas build apa pun. Anda juga boleh memakainya sepenuhnya sebagai kerangka aplikasi satu halaman, lengkap dengan routing dan rendering di sisi server. Pengetahuan yang Anda pakai di skala kecil tetap berlaku saat naik ke skala besar.

Aplikasi satu halaman atau SPA (Single Page Application) adalah aplikasi web yang memuat satu berkas HTML di awal. Isi layar kemudian diganti lewat JavaScript tanpa memuat ulang halaman. Perpindahan antarhalaman terasa instan, tetapi muatan JavaScript awalnya lebih besar.

Dari Proyek Sampingan Karyawan Google ke Framework Nomor Dua

Vue dibuat oleh Evan You saat bekerja sebagai creative technologist di Google Creative Lab. Di sanalah ia berkenalan dengan Angular, framework buatan Google, dan mulai membayangkan sesuatu yang lebih ringan. Vue awalnya hanya library templating untuk keperluannya sendiri.

Rilis publik pertamanya keluar pada Februari 2014 dan langsung masuk halaman depan Hacker News. Nama "Vue" berasal dari inisialnya, E.V., yang digabung dengan kata "view".

Vue 1.0 keluar pada Oktober 2015, Vue 2.0 pada September 2016, dan Vue 3.0 pada 18 September 2020. Saat artikel ini ditulis pada Agustus 2026, versi stabil terbarunya adalah 3.5.41, sementara Vue 3.6 masih berstatus release candidate. Seluruh kodenya berlisensi MIT, salah satu lisensi open source paling longgar, sehingga bebas dipakai untuk proyek komersial.

Soal popularitas, angka paling jujur datang dari jumlah unduhan npm. Dalam satu bulan terakhir sebelum artikel ini ditulis, paket vue diunduh sekitar 60,1 juta kali. Sebagai pembanding, react diunduh 681 juta kali, @angular/core 24,2 juta, dan svelte 22,4 juta. Vue memang berada di posisi kedua, tetapi jaraknya ke React sekitar sebelas kali lipat.

Ada satu angka lain yang sering dikutip keliru: 210 ribu bintang di GitHub. Angka itu benar, tetapi milik repositori vuejs/vue, yaitu repositori Vue 2 yang sudah tidak dikembangkan. Repositori aktif hari ini adalah vuejs/core, dengan sekitar 54 ribu bintang.

Cara Kerja Vue JS

Vue bekerja dengan tiga gagasan yang saling menopang: menulis tampilan secara deklaratif, melacak perubahan data secara otomatis, dan membungkus keduanya ke dalam komponen.

Rendering Deklaratif: Anda Menulis Hasil, Bukan Langkah

Vue memperluas HTML dengan sintaks template. Data JavaScript disisipkan memakai kurung kurawal ganda, dan perilaku ditempelkan lewat atribut khusus.

<div id="app">
  <p>Jumlah pesanan: {{ jumlah }}</p>
  <button @click="jumlah++">Tambah</button>
</div>

Tidak ada satu baris pun yang memerintahkan browser mengubah teks. Anda hanya menyatakan bahwa paragraf itu menampilkan jumlah, dan tombol itu menaikkannya. Kalau angka yang sama muncul di lima tempat berbeda, kelimanya ikut berubah tanpa kode tambahan.

Sistem Reaktivitas: Cara Vue Tahu Ada Data yang Berubah

Inilah mesin yang membuat semuanya bekerja. Vue 3 membungkus objek data Anda dengan Proxy, yaitu fitur bawaan JavaScript yang bisa menyadap setiap pembacaan dan penulisan properti.

Cara berpikirnya mirip daftar langganan majalah. Saat sebuah bagian tampilan membaca properti jumlah, Vue mencatatnya sebagai pelanggan properti itu — proses yang disebut track.

Kemudian, saat jumlah diubah, Vue membuka daftar pelanggannya dan menjalankan ulang semuanya. Proses ini disebut trigger. Bagian tampilan yang tidak pernah membaca jumlah tidak ada di daftar, jadi tidak ikut dikerjakan ulang.

Diagram alur reaktivitas Vue JS dari perubahan data hingga pembaruan DOM.

Vue 2 melakukan hal serupa dengan Object.defineProperty, karena dukungan browser saat itu belum memungkinkan Proxy. Perbedaan teknis ini membawa keterbatasan nyata. Vue 2 tidak mendeteksi penambahan properti pada objek, penetapan elemen array lewat indeks seperti items[0] = nilaiBaru, maupun perubahan items.length.

Akibatnya pengembang harus memakai Vue.set() atau splice() sebagai jalan memutar. Keterbatasan inilah alasan teknis paling konkret di balik keputusan memutus kompatibilitas di Vue 3.

Komponen dan Single-File Component

Antarmuka yang besar disusun dari potongan kecil yang bisa dipakai ulang, dan potongan itu disebut komponen. Kartu produk, bilah navigasi, atau kotak notifikasi masing-masing bisa menjadi satu komponen dengan tampilan dan perilakunya sendiri.

Vue menyimpan komponen dalam berkas berekstensi .vue, yang disebut Single-File Component atau SFC. Satu berkas memuat tiga blok: <template> berisi struktur HTML, <script> berisi logika JavaScript, dan <style> berisi CSS komponen tersebut.

Diagram anatomi komponen Vue JS dalam berkas tunggal dengan template, script, dan style.

Blok <style> bisa diberi atribut scoped, dan gayanya hanya berlaku untuk komponen itu saja. Ini menyelesaikan masalah lama pada CSS, yaitu nama kelas yang tidak sengaja bertabrakan antarbagian aplikasi.

Virtual DOM dan Arah Barunya di Vue 3.6

Menulis tampilan secara deklaratif ada harganya. Setiap kali data berubah, Vue perlu tahu bagian layar mana yang benar-benar berbeda. Menyentuh DOM asli tergolong lambat, jadi Vue menyimpan tiruan ringan struktur halaman di memori. Tiruan itu disebut Virtual DOM. Vue membandingkan versi lama dan versi barunya, lalu menyentuh DOM asli hanya untuk selisihnya.

Menariknya, arah pengembangan Vue mulai bergeser dari mekanisme ini. Vue 3.6 memperkenalkan Vapor Mode, mode kompilasi baru untuk Single-File Component yang menekan ukuran bundel dasar sekaligus menaikkan performa. Komponen yang ikut serta dikompilasi menjadi kode yang menyentuh DOM secara langsung, tanpa melewati Virtual DOM sama sekali. Dalam pengujian pihak ketiga, performanya setara Solid dan Svelte 5.

Vapor Mode bersifat opsional, dan komponen biasa tetap berjalan seperti sebelumnya. Sebagai pemula Anda belum perlu menyentuhnya. Yang penting Anda ketahui, Virtual DOM bukan lagi satu-satunya jalan, sehingga penjelasan yang menempatkannya sebagai keunggulan utama Vue mulai kedaluwarsa.

Options API dan Composition API: Dua Gaya Menulis Komponen

Vue punya dua cara menulis isi komponen, dan inilah sumber kebingungan nomor satu bagi pemula. Contoh kode di internet memakai keduanya bergantian, sering tanpa menjelaskan bahwa keduanya berbeda gaya, bukan berbeda versi.

Options API menyusun komponen sebagai objek dengan bagian bernama: data untuk menyimpan data, methods untuk fungsi, computed untuk nilai turunan.

<script>
export default {
  data() {
    return { jumlah: 0 }
  },
  methods: {
    tambah() {
      this.jumlah++
    }
  }
}
</script>

<template>
  <p>Jumlah pesanan: {{ jumlah }}</p>
  <button @click="tambah">Tambah</button>
</template>

Composition API menulis semuanya sebagai variabel dan fungsi biasa di dalam satu blok, memakai <script setup>.

<script setup>
import { ref } from 'vue'

const jumlah = ref(0)

function tambah() {
  jumlah.value++
}
</script>

<template>
  <p>Jumlah pesanan: {{ jumlah }}</p>
  <button @click="tambah">Tambah</button>
</template>

Keduanya menghasilkan tampilan yang identik. Perbedaannya terasa saat komponen membesar. Pada Options API, satu fitur utuh bisa tercecer ke tiga tempat sekaligus — datanya di data, fungsinya di methods, nilai turunannya di computed. Pada Composition API, semua yang berkaitan dengan satu fitur ditulis berdampingan, dan potongan itu bisa dipindahkan ke berkas terpisah untuk dipakai ulang.

Diagram perbandingan Vue JS antara Options API dan Composition API dalam satu komponen.

Rekomendasi resminya jelas. Pilih Options API kalau Anda tidak memakai perkakas build atau kebutuhannya sederhana. Pilih Composition API kalau Anda membangun aplikasi utuh. Saran praktis untuk pemula: pelajari Composition API dengan <script setup> sejak awal, karena itu yang dipakai proyek baru dan muncul di scaffolding resmi. Kenali Options API secukupnya agar tetap bisa membaca kode lama.

Kelebihan Vue JS

1. Kurva belajar paling landai di antara framework sekelasnya: Blok <template> berisi HTML yang sudah Anda kenal, ditambah beberapa atribut khusus. Tidak ada sintaks pencampur JavaScript dan markup yang harus dikuasai lebih dulu.
2. Ukuran runtime yang ringan: Berkas runtime Vue 3.5.41 berukuran 39 KB setelah kompresi gzip. Aplikasi contoh hasil scaffolding resmi menghasilkan bundel JavaScript 71,24 KB, atau 27,64 KB setelah gzip.
3. Perkakas resmi untuk kebutuhan umum: Routing dan manajemen data global punya paket resmi yang dirawat tim inti. Anda tidak perlu membandingkan selusin pustaka pihak ketiga hanya untuk memutuskan cara berpindah halaman.
4. Bisa diadopsi sebagian: Vue dapat dipasang hanya pada satu bagian halaman dari situs lama, tanpa menulis ulang keseluruhan proyek.
5. Bebas dipakai tanpa syarat komersial: Lisensi MIT tidak mewajibkan Anda membuka kode aplikasi maupun membayar royalti.

Kekurangan dan Hal yang Perlu Anda Pertimbangkan

1. Ekosistem pihak ketiga lebih kecil: Selisih unduhan npm yang sekitar sebelas kali lipat dibanding React punya akibat nyata. Untuk kebutuhan spesifik seperti pustaka grafik, komponen tabel data, atau integrasi layanan tertentu, pilihan siap pakai untuk Vue lebih sedikit dan lebih jarang diperbarui.
2. Sebaran lowongan kerja tidak merata: Pencarian di JobStreet Indonesia pada Agustus 2026 mengembalikan 844 lowongan yang menyebut React dan 379 yang menyebut Vue. Selisihnya sekitar dua kali lipat. Kalau tujuan utama Anda belajar adalah mempercepat masuk kerja, angka ini tidak bisa diabaikan.
3. Dua gaya API menambah beban belajar: Contoh kode yang beredar tidak seragam. Pemula sering menyalin dua gaya sekaligus ke satu berkas dan bingung ketika hasilnya tidak berjalan.
4. Banyak materi belajar tertinggal di Vue 2: Persoalan tersendiri yang dibahas di bagian berikutnya.
5. Pemisahan template dari logika tidak disukai semua orang: Sebagian pengembang menganggap menulis tampilan sebagai ekspresi JavaScript biasa lebih fleksibel, terutama saat kondisinya rumit. Vue mendukung cara itu, tetapi sintaks template tetap jalur utamanya.

Cara Mengenali Materi Belajar Vue yang Sudah Usang

Vue 2 berhenti didukung sejak 31 Desember 2023, dengan versi terakhir 2.7.16. Tidak ada lagi perbaikan keamanan maupun penambalan bug untuk versi itu. Masalahnya, materi belajar era Vue 2 masih beredar utuh dan sering tanpa penanda versi. Terjemahan dokumentasi Vue berbahasa Indonesia yang mudah ditemukan pun masih berhenti di Vue 2.

Ada empat penanda untuk mengenalinya dalam hitungan detik:

1. Alamat halaman memuat /v2/: Dokumentasi Vue 3 berada di vuejs.org tanpa penanda versi di jalurnya.
2. Kode memakai new Vue({ ... }): Vue 3 memakai createApp({ ... }) untuk memulai aplikasi.
3. Kode memakai Vue.set() atau this.$set(): Perintah ini tidak ada lagi di Vue 3 karena reaktivitas berbasis Proxy tidak membutuhkannya.
4. Materi mengajarkan Vuex untuk menyimpan data global: Vuex kini berstatus maintenance mode — masih berjalan, tetapi tidak lagi menerima fitur baru. Penggantinya Pinia.

Kalau sebuah tutorial memenuhi salah satu penanda di atas, konsepnya sering masih berguna, tetapi kodenya jangan disalin mentah-mentah. Bandingkan dulu dengan dokumentasi resmi Vue 3.

Ekosistem Resmi yang Perlu Anda Kenal

Berbeda dengan library yang hanya mengurus tampilan, Vue menyediakan paket resmi untuk kebutuhan yang hampir selalu muncul di aplikasi sungguhan.

Diagram ekosistem resmi Vue JS dengan Vue Router, Pinia, Nuxt, Vite, dan Vue DevTools.

1. Vue Router: Mengatur halaman mana yang ditampilkan berdasarkan alamat URL, termasuk parameter dinamis dan pembatasan akses.
2. Pinia: Menyimpan data yang dipakai bersama banyak komponen, misalnya identitas pengguna yang login atau isi keranjang belanja. Inilah rekomendasi resmi untuk aplikasi baru.
3. Nuxt: Framework tingkat atas di atas Vue, menambahkan rendering di sisi server, pembuatan situs statis, dan routing berbasis struktur folder.
4. Vite: Perkakas build yang juga dibuat Evan You, menjalankan server pengembangan cepat dan menyiapkan berkas siap tayang.
5. Vue DevTools: Ekstensi browser untuk memeriksa struktur komponen, isi data, dan urutan perubahan.

Untuk pembaca yang bekerja dengan backend PHP, Laravel menyediakan starter kit Vue resmi lewat Inertia, lengkap dengan Composition API, TypeScript, Tailwind, dan shadcn-vue. Anda menulis antarmuka sebagai aplikasi satu halaman, tetapi routing dan controller tetap ditangani Laravel seperti biasa.

Vue JS vs React: Tiga Perbedaan yang Terasa Sehari-hari

Perbandingan Vue dan React sering berhenti pada daftar fitur. Padahal yang benar-benar mengubah cara Anda bekerja hanya tiga hal.

Pertama, cara menulis tampilan. Vue memakai sintaks template di dalam blok <template>, sehingga strukturnya tetap terlihat seperti HTML. React memakai JSX, yang menulis markup sebagai ekspresi JavaScript. Template lebih cepat dikenali pemula; JSX lebih leluasa saat logika tampilannya rumit.

Kedua, cara data reaktif bekerja. Di Vue, Anda mengubah nilai secara langsung dan Proxy mendeteksinya. Di React, nilai state diganti lewat fungsi pengubah, lalu komponen dijalankan ulang. Model Vue lebih dekat dengan JavaScript sehari-hari, sedangkan model React memaksa alur perubahan data lebih eksplisit.

Ketiga, jumlah keputusan di awal proyek. Vue adalah framework, jadi routing dan manajemen data sudah punya jawaban resmi. React hanya mengurus tampilan, sehingga pustaka pendukungnya Anda tentukan sendiri. Keleluasaan itu berharga bagi tim berpengalaman, tetapi melelahkan bagi orang yang baru memulai.

Cara Mulai Menggunakan Vue JS

Empat langkah berikut sudah cukup untuk membawa Anda dari nol sampai aplikasi Vue yang berjalan. Setelah itu, tutorial Vue JS mana pun yang Anda ikuti akan terasa jauh lebih mudah karena perkakasnya sudah siap.

Langkah #1: Pilih Jalur yang Sesuai Kebutuhan

Ada dua jalur memakai Vue. Jalur pertama tanpa perkakas build: cukup menyisipkan satu tag script ke halaman HTML yang sudah ada. Cocok untuk menambahkan bagian interaktif kecil ke situs lama.

<div id="app">
  <p>Jumlah pesanan: {{ jumlah }}</p>
  <button @click="jumlah++">Tambah</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const jumlah = ref(0)
      return { jumlah }
    }
  }).mount('#app')
</script>

Simpan sebagai berkas .html, buka di browser, dan tombolnya sudah berfungsi. Perlu dicatat, berkas vue.global.js menyertakan compiler template sehingga ukurannya 59 KB setelah gzip. Berkas runtime saja hanya 39 KB. Selisih 20 KB itu harga kemudahan tanpa proses build.

Jalur kedua berupa proyek penuh dengan Single-File Component. Inilah yang dipakai hampir semua aplikasi Vue sungguhan, dan langkah berikutnya membahas jalur ini.

Langkah #2: Siapkan Node.js

Vue membutuhkan Node.js untuk menjalankan perkakas pengembangannya. Scaffolding resmi versi terbaru mensyaratkan Node.js ^22.18.0 atau >=24.12.0, jadi versi lama perlu diperbarui lebih dulu. Unduh dari situs resmi Node.js, lalu periksa hasilnya:

node -v
npm -v

Kedua perintah harus mengembalikan nomor versi. Perintah npm terpasang otomatis bersama Node.js dan bertugas mengunduh paket dari registry, dan kami membahasnya terpisah di artikel tentang npm.

Langkah #3: Buat Proyek Vue

Perintah resmi untuk membuat proyek baru:

npm create vue@latest

Perintah ini mengunduh perkakas create-vue, lalu menanyakan nama proyek dan fitur yang ingin disertakan: TypeScript, dukungan JSX, Vue Router, Pinia, Vitest, ESLint, dan Prettier. Untuk proyek pertama, pilih TypeScript dan tambahkan Vue Router bila aplikasinya punya lebih dari satu halaman. Lewati sisanya, karena semuanya bisa ditambahkan belakangan.

Langkah #4: Jalankan dan Pahami Hasilnya

Masuk ke folder proyek, pasang dependensi, lalu jalankan server pengembangan:

cd nama-proyek-anda
npm install
npm run dev

Server pengembangan menampilkan alamat lokal, biasanya http://localhost:5173. Setiap kali Anda menyimpan perubahan pada berkas .vue, tampilan di browser ikut menyesuaikan tanpa memuat ulang halaman.

Kode aplikasi berada di folder src. Berkas src/main.ts adalah titik awal yang memasang aplikasi ke halaman, src/App.vue adalah komponen paling luar, dan src/components menampung komponen lainnya.

Saat aplikasi siap tayang, jalankan proses build:

npm run build

Hasilnya masuk ke folder dist. Pada proyek contoh bawaan, isinya hanya tiga berkas: index.html 0,42 KB, satu berkas CSS 3,56 KB, dan satu berkas JavaScript 71,24 KB. Berkas JavaScript itu menjadi 27,64 KB setelah gzip, dan seluruh proses build selesai dalam 237 milidetik.

Poin penting dari hasil ini: seluruh isi folder dist adalah berkas statis biasa. Tidak ada proses Node.js yang perlu berjalan di server. Anda dapat mengunggahnya ke layanan web hosting standar seperti situs HTML biasa. Kebutuhan server yang lebih besar baru muncul kalau Anda memakai Nuxt dengan rendering di sisi server.

Pertanyaan yang Sering Muncul Seputar Vue JS

Vue JS untuk apa? Vue dipakai membangun bagian tampilan aplikasi web yang isinya berubah mengikuti data dan interaksi pengguna: dashboard admin, keranjang belanja, formulir bertingkat, atau halaman pencarian dengan filter. Vue juga bisa dipakai untuk seluruh situs, termasuk situs statis, lewat Nuxt.

Apakah harus menguasai JavaScript dulu sebelum belajar Vue? Ya, dan ini bukan formalitas. Anda perlu nyaman dengan variabel, fungsi, array, objek, serta cara kerja map dan filter. Tanpa itu Anda akan menyalin kode tanpa memahami penyebab kesalahan. HTML dan CSS dasar juga wajib karena blok <template> adalah HTML.

Berapa lama belajar Vue sampai bisa membuat aplikasi sederhana? Dengan bekal JavaScript yang memadai dan waktu belajar dua jam sehari, panduan resminya bisa dituntaskan dalam dua sampai tiga minggu. Aplikasi CRUD sederhana yang terhubung ke API biasanya tercapai pada minggu keempat sampai keenam.

Apakah masih perlu belajar Vue 2? Tidak, kalau Anda memulai dari nol. Pelajari langsung Vue 3 dengan Composition API. Vue 2 hanya relevan bila Anda ditugaskan merawat aplikasi lama yang belum dimigrasikan. Dalam kasus itu pun cukup mempelajari perbedaannya, bukan mempelajarinya dari awal.

Sebaiknya pilih Vue atau React sebagai framework pertama? Kalau target Anda memahami konsep antarmuka berbasis komponen secepat mungkin, Vue lebih ramah karena templatenya masih berupa HTML. Kalau target Anda melamar kerja frontend di Indonesia dalam enam bulan ke depan, React memberi peluang lebih besar karena jumlah lowongannya sekitar dua kali lipat. Setelah menguasai salah satunya, berpindah ke yang lain memerlukan sekitar dua minggu.

Kesimpulan

Vue JS adalah framework JavaScript progresif untuk membangun antarmuka web, dengan sistem reaktivitas berbasis Proxy yang menjaga tampilan selalu cocok dengan data. Kekuatannya terletak pada sintaks template yang dekat dengan HTML dan tersedianya paket resmi untuk routing serta penyimpanan data global.

Pilih Vue ketika Anda ingin cepat produktif tanpa menghabiskan waktu memilih pustaka pendukung, atau ketika perlu menambahkan bagian interaktif ke situs yang sudah berjalan. Pertimbangkan ulang bila peluang kerja menjadi pertimbangan utama, sebab sebaran lowongan di Indonesia masih condong ke React. Apa pun pilihan Anda, mulailah dari Vue 3 dan Composition API, lalu periksa penanda versi sebelum mengikuti tutorial mana pun.

Semoga artikel ini membantu.