Cara Menggunakan Vue pada HTML: Panduan Lengkap untuk Pemula

Vue.js adalah salah satu framework JavaScript modern yang populer untuk membangun antarmuka pengguna (UI) yang dinamis dan responsif. Walaupun Vue sering digunakan bersama alat build seperti Vue CLI atau Vite, kamu juga bisa menggunakannya langsung dalam file HTML — terutama ketika belajar atau membuat proyek sederhana.

Artikel ini akan membimbing kamu dari awal: mulai dari memahami apa itu Vue, bagaimana cara memasangnya di HTML, sampai membuat contoh aplikasi kecil yang langsung berjalan di browser.

Apa Itu Vue.js?

Vue.js (sering disebut hanya “Vue”) adalah framework JavaScript progresif yang dirancang untuk membangun antarmuka pengguna yang cepat, modular, dan mudah dipahami. Vue membantu membuat halaman HTML menjadi interaktif tanpa perlu menulis banyak script JavaScript manual.

Kalau kamu masih baru dengan HTML secara umum, kamu bisa mulai dulu dari dasar seperti Panduan Cara Membuat Website dengan HTML atau Panduan Lengkap Belajar Elemen HTML.

Menggunakan Vue di Dokumen HTML

Untuk menggunakan Vue di HTML tanpa alat build, kita akan memanggil library Vue melalui CDN (Content Delivery Network). Ini cocok ketika kamu ingin langsung mencoba Vue tanpa setup kompleks.

Menambahkan Script Vue

Tambahkan kode script CDN berikut ke dalam file HTML kamu — biasanya di akhir tag <body>:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Script di atas akan memuat Vue versi 3, yang merupakan versi terbaru dan banyak digunakan saat ini.

Membuat Aplikasi Vue Sederhana

Sekarang kita akan membuat contoh aplikasi Vue sederhana yang menampilkan data dan mengubahnya melalui input pengguna.

Struktur Dasar HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Vue di HTML</title>
</head>
<body>

    <div id="app">
        <h1>{{ message }}</h1>
        <input type="text" v-model="message">
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const App = {
            data() {
                return {
                    message: "Halo, ini contoh Vue!"
                }
            }
        }
        Vue.createApp(App).mount("#app")
    </script>

</body>
</html>

Penjelasan singkat:

  • <div id="app"> – ini adalah tempat Vue akan aktif
  • {{ message }} – sintaks template Vue untuk menampilkan data
  • v-model – diretif Vue yang mengikat input pengguna ke data Vue
  • Vue.createApp().mount() – syntax Vue untuk inisialisasi aplikasi

Dengan mengetik sesuatu di input, kamu akan melihat teks di judul berubah secara real time — dan itu semua terjadi tanpa reload halaman!

Directive Vue yang Sering Digunakan

Directive adalah atribut khusus yang digunakan Vue untuk memberi tahu bagaimana elemen HTML harus berperilaku.

  • v-model – mengikat elemen form dengan data
  • v-if – menampilkan/menghilangkan elemen berdasarkan kondisi
  • v-for – mengulang elemen berdasarkan array
  • @click – menangani event klik

Contoh penggunaan v-if:

<div v-if="showMessage">Ini muncul jika kondisi true</div>

Mengelola Data dengan Vue

Salah satu kekuatan Vue adalah kemampuannya untuk mengelola data dan membuat UI merespons data tersebut.

Misalnya kamu ingin menampilkan daftar:

<div id="app">
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
</div>

<script>
  const App = {
    data() {
      return {
        items: ["HTML", "CSS", "JavaScript", "Vue"]
      }
    }
  }
  Vue.createApp(App).mount("#app")
</script>

Direktif v-for membuat elemen <li> diulang sebanyak jumlah item di array.

Vue dan Interaktivitas

Vue sangat berguna ketika kamu ingin membuat halaman web lebih interaktif tanpa menulis banyak JavaScript manual. Misalnya, tombol untuk menambah atau menghapus item:

<button @click="addItem">Tambah Item</button>

<script>
const App = {
    data() {
        return {
            items: ["HTML", "CSS"]
        }
    },
    methods: {
        addItem() {
            this.items.push("Item Baru");
        }
    }
}
Vue.createApp(App).mount("#app")
</script>

Event @click akan memanggil method Vue yang ditentukan dalam objek methods.

Tips Menggunakan Vue di HTML Tanpa Build Tools

Meskipun Vue sering dipakai dengan alat seperti Vue CLI atau Vite, kamu bisa memulainya langsung di file HTML dengan aman jika:

  • Proyek bersifat kecil atau belajar
  • Kamu ingin prototipe cepat tanpa setup kompleks
  • Tidak membutuhkan fitur modular seperti single-file components

Jika nanti kamu ingin lanjut ke Vue dengan tooling modern, pelajari topik seperti module bundler atau Vue CLI.

Kesalahan Umum Pemula

Berikut beberapa kesalahan yang sering terjadi ketika menggunakan Vue langsung di HTML:

  • Lupa memuat script Vue sebelum script aplikasi – urutan harus jelas agar Vue bisa dikenali.
  • Kesalahan dalam penulisan direktif (typo) – seperti v-model vs v-models.
  • Mount element yang tidak ada – pastikan ID yang digunakan di mount() benar.

Jika kamu mengalami error JavaScript saat belajar HTML, artikel Cara Memperbaiki Kesalahan pada HTML bisa membantu memahami masalah umum.

Kapan Harus Menggunakan Vue?

Vue sangat cocok ketika kamu ingin membuat komponen UI yang:

  • Responsif terhadap perubahan data
  • Perlu update tanpa reload halaman
  • Interaksi pengguna tinggi

Jika kamu baru mulai, pelajari dulu dasar JavaScript di artikel seperti Cara Menggunakan JavaScript pada HTML.

Kesimpulan

Menggunakan Vue di dalam HTML memberikan cara cepat dan sederhana untuk membuat halaman menjadi interaktif. Dengan memahami directive dasar seperti v-model, v-for, dan event binding, kamu bisa membuat UI dinamis tanpa setup rumit.

Artikel lanjutan seperti Belajar HTML dari Nol sampai Bisa Membuat Website Sendiri atau Cara Menggunakan React pada HTML bisa menjadi langkah selanjutnya setelah kamu nyaman dengan Vue.

Label: