Beranda / HTML

Cara Menggunakan Vue pada HTML

Diposting oleh Adi Prayitno Posting Komentar

Pernah membuat halaman HTML yang awalnya sederhana, lalu mulai membutuhkan tombol interaktif, data yang berubah otomatis, atau tampilan yang mengikuti input pengguna? Di titik itu, JavaScript biasa memang bisa digunakan, tetapi kode bisa cepat melebar. Cara menggunakan Vue pada HTML menjadi salah satu pilihan menarik karena Vue dapat ditambahkan secara bertahap ke halaman HTML yang sudah ada.

Vue adalah framework JavaScript untuk membangun antarmuka pengguna yang menggunakan HTML, CSS, dan JavaScript sebagai fondasinya. Vue 3 juga bisa digunakan langsung melalui CDN tanpa build tools, sehingga cocok untuk belajar atau menambahkan interaktivitas ke halaman HTML sederhana.

Kalau kamu sedang belajar HTML di Adi Prayitno, bagian ini sebenarnya cukup menyenangkan. Kita tidak perlu langsung membuat proyek besar. Mulai saja dari satu file HTML, satu <script>, lalu lihat bagaimana halaman biasa berubah menjadi interaktif.

Cara Menggunakan Vue pada HTML
Cara Menggunakan Vue pada HTML

Apa Itu Vue?

Vue adalah framework JavaScript untuk membangun user interface. Salah satu keunggulannya adalah Vue bisa digunakan secara bertahap, mulai dari menambahkan sedikit interaktivitas pada halaman HTML sampai membangun aplikasi frontend yang jauh lebih kompleks.

Vue menggunakan konsep seperti reactivity, template, component, dan event handling. Dengan reaktivitas, ketika data yang digunakan oleh tampilan berubah, Vue dapat memperbarui bagian DOM yang berkaitan secara otomatis.

Menariknya, untuk contoh sederhana kita tidak harus langsung belajar Vite, npm, Single-File Component, atau konfigurasi proyek. Vue menyediakan penggunaan melalui CDN tanpa build step.

Apakah Vue Bisa Digunakan Langsung di HTML?

Bisa.

Vue menyediakan distribusi yang dapat dimuat melalui elemen <script>. Dokumentasi resmi Vue memberikan contoh penggunaan Vue 3 melalui CDN seperti berikut:

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

Setelah script tersebut dimuat, API Vue tersedia melalui objek global Vue.

Ini membuat Vue cukup praktis untuk halaman HTML biasa.

Struktur sederhananya kira-kira seperti ini:

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

  <div id="app">
    <h1>{{ message }}</h1>
  </div>

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

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>

</body>
</html>

Saat halaman dibuka, Vue akan mengambil elemen #app sebagai tempat aplikasi dipasang.

Cara Menggunakan Vue pada HTML

Sekarang kita masuk ke bagian yang paling penting. Ada beberapa langkah sederhana untuk menjalankan Vue 3 pada HTML biasa.

1. Buat File HTML

Buat sebuah file bernama:

index.html

Kemudian masukkan struktur HTML dasar:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Vue</title>
</head>
<body>

</body>
</html>

UTF-8 tetap penting karena halaman web mungkin berisi berbagai karakter, termasuk emoji dan karakter Unicode.

2. Tambahkan Vue dari CDN

Masukkan script Vue sebelum kode JavaScript aplikasi:

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

Menurut dokumentasi resmi Vue, pendekatan CDN tidak membutuhkan build step dan cocok untuk meningkatkan halaman HTML statis atau mengintegrasikan Vue dengan backend yang sudah ada.

Jadi untuk latihan pertama, kita belum perlu membuat struktur proyek yang rumit.

3. Buat Container Vue

Selanjutnya buat elemen yang akan menjadi tempat aplikasi Vue:

<div id="app">
</div>

ID app bukan nama yang wajib. Kamu bisa menggunakan nama lain, selama selector pada mount() juga disesuaikan.

Contohnya:

<div id="vue-app">
</div>

Kemudian:

app.mount('#vue-app')

Yang penting keduanya menunjuk ke elemen yang sama.

4. Buat Instance Vue

Sekarang kita gunakan createApp():

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Halo dari Vue!'
      }
    }
  }).mount('#app')
</script>

Dalam Vue 3, setiap aplikasi dimulai dengan membuat application instance menggunakan createApp(). Instance tersebut kemudian dapat dipasang ke container menggunakan .mount().

Nah, di sinilah HTML biasa mulai terasa sedikit berbeda.

Contoh Vue Sederhana dalam HTML

Mari buat contoh yang benar-benar bisa langsung dicoba:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Vue pada HTML</title>
</head>

<body>

  <div id="app">
    <h1>{{ message }}</h1>
  </div>

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

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Halo, saya sedang belajar Vue!'
        }
      }
    }).mount('#app')
  </script>

</body>
</html>

Hasilnya akan menampilkan:

Halo, saya sedang belajar Vue!

Perhatikan bagian:

{{ message }}

Itulah text interpolation Vue. Nilainya berasal dari data bernama message.

Kalau kita mengubah:

message: 'Halo, saya sedang belajar Vue!'

menjadi:

message: 'Selamat datang di Adi Prayitno!'

maka teks pada halaman juga berubah.

Mengenal {{ }} pada Vue

Kurung kurawal ganda digunakan Vue untuk menampilkan nilai JavaScript ke dalam template.

Contoh:

<div id="app">
  <p>{{ nama }}</p>
</div>

Kemudian:

createApp({
  data() {
    return {
      nama: 'Adi Prayitno'
    }
  }
}).mount('#app')

Hasil:

Adi Prayitno

Kita juga bisa menggunakan ekspresi sederhana.

<p>{{ angka + 10 }}</p>

Jika:

angka: 20

maka hasilnya:

30

Vue memang memperluas HTML dengan sintaks template deklaratif untuk menghubungkan tampilan dengan data aplikasi.

Membuat Tombol Interaktif dengan Vue

Bagian ini biasanya mulai terasa seru.

Kita bisa membuat tombol yang mengubah angka tanpa harus memanipulasi DOM secara manual.

<div id="app">

  <h2>Jumlah: {{ count }}</h2>

  <button @click="count++">
    Tambah
  </button>

</div>

JavaScript-nya:

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        count: 0
      }
    }
  }).mount('#app')
</script>

Sekarang setiap tombol ditekan, angka akan bertambah.

@click merupakan bentuk singkat dari directive v-on untuk menangani event. Vue menyediakan directive bawaan seperti v-on, v-bind, v-if, v-for, dan v-model untuk berbagai kebutuhan template.

Membuat Tombol Tambah dan Kurang

Kita bisa mengembangkan contoh sebelumnya:

<div id="app">

  <h2>Jumlah: {{ count }}</h2>

  <button @click="count--">Kurang</button>
  <button @click="count++">Tambah</button>

</div>

Data Vue:

data() {
  return {
    count: 0
  }
}

Sekarang halaman HTML sudah mempunyai interaksi sederhana.

Tidak perlu menulis:

document.querySelector(...)

untuk mengubah teks secara manual pada contoh ini. Vue menghubungkan state dengan tampilan dan memperbarui DOM ketika state berubah.

Menggunakan v-model pada Input HTML

Vue juga sangat nyaman ketika bekerja dengan form.

Misalnya:

<div id="app">

  <input v-model="nama" placeholder="Masukkan nama">

  <p>Halo, {{ nama }}!</p>

</div>

Data:

data() {
  return {
    nama: ''
  }
}

Ketika pengguna mengetik:

Adi

hasilnya langsung menjadi:

Halo, Adi!

v-model merupakan directive Vue yang digunakan untuk membuat binding antara data dan input form.

Buat saya, contoh seperti ini adalah salah satu cara paling enak untuk memahami kenapa framework frontend terasa berguna. Kita mengubah data, lalu tampilan mengikuti. Tidak perlu terus-terusan menyuruh browser mengubah elemen satu per satu.

Menampilkan Data dengan v-if

Vue juga dapat menampilkan elemen berdasarkan kondisi.

Contoh:

<div id="app">

  <button @click="login = !login">
    Ubah Status
  </button>

  <p v-if="login">
    Kamu sudah login.
  </p>

  <p v-else>
    Kamu belum login.
  </p>

</div>

JavaScript:

data() {
  return {
    login: false
  }
}

Ketika tombol diklik, nilai login berubah.

Vue kemudian menampilkan bagian yang sesuai dengan kondisi tersebut. v-if dan v-else merupakan directive bawaan untuk conditional rendering.

Menampilkan Daftar dengan v-for

Bagaimana kalau kita punya daftar data?

Vue menyediakan v-for.

<div id="app">

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

</div>

Data:

data() {
  return {
    items: [
      'HTML',
      'CSS',
      'JavaScript',
      'Vue'
    ]
  }
}

Hasilnya:

  • HTML
  • CSS
  • JavaScript
  • Vue

Daripada menulis empat elemen <li> secara manual, Vue membuatnya berdasarkan data.

Contoh Lengkap Vue pada HTML

Kalau ingin melihat semuanya dalam satu halaman, coba kode berikut:

<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Belajar Vue pada HTML</title>
</head>

<body>

  <div id="app">

    <h1>{{ title }}</h1>

    <p>{{ description }}</p>

    <h2>Counter</h2>

    <button @click="count--">
      -
    </button>

    <strong>{{ count }}</strong>

    <button @click="count++">
      +
    </button>

    <h2>Nama</h2>

    <input
      v-model="nama"
      placeholder="Masukkan nama"
    >

    <p>
      Halo, {{ nama || 'pengunjung' }}!
    </p>

    <h2>Daftar Materi</h2>

    <ul>
      <li v-for="materi in materiList">
        {{ materi }}
      </li>
    </ul>

  </div>

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

  <script>

    const { createApp } = Vue

    createApp({

      data() {

        return {

          title: 'Belajar Vue pada HTML',

          description:
            'Contoh sederhana menggunakan Vue 3 tanpa build tools.',

          count: 0,

          nama: '',

          materiList: [
            'HTML',
            'CSS',
            'JavaScript',
            'Vue'
          ]

        }

      }

    }).mount('#app')

  </script>

</body>
</html>

Satu file HTML saja sudah cukup untuk mencoba beberapa konsep dasar Vue.

Vue dari CDN atau Menggunakan Vite?

Nah, ini bagian yang sering membuat pemula bingung.

CDN cocok ketika kamu ingin:

  • belajar Vue dengan cepat;
  • mencoba contoh kecil;
  • menambahkan interaktivitas ke HTML yang sudah ada;
  • menggunakan Vue tanpa build tools;
  • membuat demo sederhana.

Vue sendiri memang mendukung pendekatan ini secara resmi.

Sementara itu, kalau kamu ingin membangun aplikasi Vue yang lebih besar, pendekatan dengan build tools dan Single-File Components biasanya jauh lebih nyaman. Dokumentasi resmi Vue merekomendasikan penggunaan setup berbasis build tools ketika kebutuhan proyek memang mengarah ke sana.

Jadi jangan merasa harus langsung belajar semuanya.

Untuk belajar konsep dasar, CDN sudah cukup.

Apakah Vue Bisa Digunakan di Blogger?

Secara konsep, bisa, selama lingkungan Blogger mengizinkan script yang dibutuhkan dan implementasinya sesuai dengan struktur template atau postingan.

Untuk eksperimen sederhana, konsepnya sama:

<div id="app">
  {{ message }}
</div>

Kemudian Vue dimuat:

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

Lalu aplikasi dipasang:

const { createApp } = Vue

createApp({
  data() {
    return {
      message: 'Halo dari Vue!'
    }
  }
}).mount('#app')

Namun untuk blog yang fokus pada artikel, saya tidak akan memasang Vue di seluruh halaman hanya untuk membuat satu tombol. Ada beban JavaScript yang harus dipertimbangkan, sementara kebutuhan tersebut mungkin bisa diselesaikan dengan JavaScript biasa.

Vue paling terasa manfaatnya ketika interaksinya mulai bertambah.

Kesalahan Pemula Saat Menggunakan Vue pada HTML

Ada beberapa jebakan kecil yang sering membuat contoh pertama gagal.

1. Lupa Memuat Vue

Kalau kode menggunakan:

Vue.createApp(...)

tetapi script Vue belum dimuat, tentu browser tidak tahu apa itu Vue.

Pastikan script CDN tersedia sebelum kode aplikasi dijalankan.

2. Selector mount() Tidak Cocok

Misalnya HTML:

<div id="app"></div>

tetapi JavaScript:

.mount('#vue')

Ini tidak menunjuk ke elemen yang sama.

Gunakan:

.mount('#app')

Vue akan memasang aplikasi pada container yang ditentukan oleh selector tersebut.

3. Menggunakan Sintaks Vue di Luar Aplikasi

Misalnya:

<div id="app">
  {{ message }}
</div>

<p>{{ message }}</p>

Elemen kedua berada di luar #app, sehingga bukan bagian dari root application tersebut.

4. Menggunakan Vue 2 dari Tutorial Lama

Ini penting kalau kamu mencari tutorial Vue di internet.

Vue 2 sudah mencapai akhir dukungan pada 31 Desember 2023. Dokumentasi resmi saat ini adalah dokumentasi Vue 3.

Jadi kalau menemukan tutorial lama yang menggunakan pola Vue 2, jangan langsung menganggapnya sebagai contoh terbaru.

Gunakan Production Build Saat Website Sudah Live

Untuk belajar, development build dari CDN sangat nyaman karena memberikan fitur yang membantu proses pengembangan.

Tetapi untuk penggunaan production tanpa build tools, dokumentasi resmi Vue menyarankan menggunakan file production build, yaitu vue.global.prod.js untuk global build atau vue.esm-browser.prod.js untuk ESM build.

Contohnya:

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

Ini lebih cocok ketika halaman sudah benar-benar dipublikasikan.

Untuk eksperimen di artikel Adi Prayitno, development build masih sangat nyaman karena kita memang sedang belajar dan menguji kode.

Kapan Sebaiknya Menggunakan Vue?

Vue tidak selalu menjadi jawaban untuk setiap halaman HTML.

Menurut saya, Vue mulai menarik ketika halaman membutuhkan interaksi seperti:

  • counter;
  • form dinamis;
  • filter data;
  • pencarian langsung;
  • daftar yang berubah;
  • kalkulator;
  • tab interaktif;
  • modal;
  • dashboard;
  • komponen UI yang digunakan berulang kali.

Kalau hanya ingin mengubah warna tombol ketika diklik, JavaScript biasa mungkin sudah cukup.

Vue mulai terasa "worth it" ketika hubungan antara data, tampilan, dan interaksi mulai semakin rumit.

Kesimpulan

Cara menggunakan Vue pada HTML sebenarnya cukup sederhana untuk tahap awal. Kamu hanya perlu memuat Vue 3, membuat elemen sebagai container aplikasi, menjalankan createApp(), kemudian menggunakan .mount() untuk memasang aplikasi pada elemen tersebut. Vue juga menyediakan fitur seperti interpolation, v-model, v-if, v-for, dan event handling untuk membuat HTML menjadi lebih interaktif.

Untuk pemula, saya menyarankan jangan langsung melompat ke proyek besar. Coba dulu satu file HTML dengan counter, input nama, dan daftar sederhana. Setelah mulai nyaman dengan konsep reactivity, barulah lanjut ke component, Composition API, Vite, dan Single-File Components.

Kalau kamu sedang belajar HTML dan JavaScript dari awal, simpan artikel Adi Prayitno ini sebagai pijakan sebelum masuk lebih jauh ke Vue 3. Setelah berhasil menjalankan contoh pertamanya, coba kembangkan sendiri menjadi kalkulator atau aplikasi to-do sederhana. Kalau berhasil, boleh ceritakan hasilnya di komentar atau bagikan artikel ini ke teman yang juga sedang belajar frontend.

Posting Komentar untuk "Cara Menggunakan Vue pada HTML"