Belajar Vue.js 3: Panduan Lengkap untuk Aplikasi Web Interaktif!

Daftar Isi

Pengantar Vue.js 3
Instalasi dan Setup Proyek
Struktur Dasar Aplikasi Vue.js 3
Template dan Binding Data
Komponen Vue.js
Reaktivitas dan Composition API
Routing dengan Vue Router
State Management dengan Pinia
Event Handling dan Lifecycle Hooks
Form dan Validasi
Deployment Aplikasi Vue.js
Penutup dan Sumber Belajar

1. Pengantar Vue.js 3

Vue.js adalah framework JavaScript progresif yang digunakan untuk membangun antarmuka pengguna (user interfaces) dan aplikasi web interaktif. Vue.js 3 merupakan versi terbaru yang membawa banyak peningkatan performa dan fitur baru seperti Composition API, yang memudahkan pengelolaan state dan logika aplikasi.

Dengan Vue.js 3, pengembang dapat membuat aplikasi web yang responsif, modular, dan mudah dipelihara. Ebook ini akan membimbing Anda dari dasar hingga mahir dalam membangun aplikasi web menggunakan Vue.js 3.

2. Instalasi dan Setup Proyek

Untuk memulai proyek Vue.js 3, Anda dapat menggunakan Vue CLI atau Vite. Vite adalah build tool modern yang sangat cepat dan direkomendasikan untuk proyek Vue.js 3.

npm create vite@latest nama-proyek -- --template vue
cd nama-proyek
npm install
npm run dev

Perintah di atas akan membuat proyek Vue.js 3 baru dengan template dasar, menginstal dependensi, dan menjalankan server pengembangan.

Tampilan terminal dengan perintah instalasi dan setup proyek Vue.js 3 menggunakan Vite

3. Struktur Dasar Aplikasi Vue.js 3

Setelah membuat proyek, Anda akan melihat struktur folder seperti berikut:

src/ - Folder utama untuk kode sumber aplikasi
src/main.js - Titik masuk aplikasi
src/App.vue - Komponen root aplikasi
src/components/ - Folder untuk komponen Vue
public/ - Folder untuk aset statis

Diagram struktur folder proyek Vue.js 3 dengan folder src, components, public, dan file utama

4. Template dan Binding Data

Vue.js menggunakan template berbasis HTML yang memungkinkan binding data secara deklaratif menggunakan sintaks khusus.

Contoh binding data sederhana:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Halo, Vue.js 3!')
</script>

Binding ini akan menampilkan teks "Halo, Vue.js 3!" secara reaktif.

Contoh kode Vue.js 3 template dengan binding data message yang menampilkan teks Halo Vue.js 3

5. Komponen Vue.js

Komponen adalah blok bangunan utama dalam Vue.js yang memungkinkan Anda membuat UI yang dapat digunakan kembali.

Contoh komponen sederhana:

<template>
  <button @click="increment">Klik saya: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

Komponen ini menampilkan tombol yang menghitung jumlah klik secara reaktif.

Tampilan tombol dengan teks Klik saya: 0 yang akan bertambah saat diklik, contoh komponen Vue.js 3

6. Reaktivitas dan Composition API

Vue.js 3 memperkenalkan Composition API yang memberikan cara baru untuk mengelola state dan logika komponen secara lebih fleksibel.

Contoh penggunaan ref dan computed :

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

const angka = ref(5)
const kuadrat = computed(() => angka.value * angka.value)
</script>

<template>
  <div>
    <p>Angka: {{ angka }}</p>
    <p>Kuadrat: {{ kuadrat }}</p>
  </div>
</template>

Ketika nilai angka berubah, nilai kuadrat akan otomatis terupdate.

Kode Vue.js 3 yang menunjukkan penggunaan ref dan computed untuk reaktivitas data angka dan kuadrat

7. Routing dengan Vue Router

Vue Router adalah pustaka resmi untuk mengelola navigasi dan routing dalam aplikasi Vue.js.

Contoh konfigurasi router dasar:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Router ini mengatur dua halaman: Home dan About.

Diagram navigasi aplikasi Vue.js dengan dua rute Home dan About menggunakan Vue Router

8. State Management dengan Pinia

Pinia adalah pustaka manajemen state resmi untuk Vue.js yang menggantikan Vuex dengan API yang lebih sederhana dan modern.

Contoh store Pinia:

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Store ini menyimpan state count dan aksi increment untuk menambah nilai count.

Kode contoh Pinia store untuk manajemen state counter dengan state count dan action increment

9. Event Handling dan Lifecycle Hooks

Vue.js memungkinkan Anda menangani event DOM dan lifecycle hooks untuk mengontrol perilaku komponen.

Contoh event handling dan lifecycle hook:

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

const pesan = ref('')

onMounted(() => {
  pesan.value = 'Komponen sudah dimuat!'
})

function klikTombol() {
  alert('Tombol diklik!')
}
</script>

<template>
  <div>
    <p>{{ pesan }}</p>
    <button @click="klikTombol">Klik Saya</button>
  </div>
</template>

Lifecycle hook onMounted digunakan untuk menjalankan kode saat komponen sudah siap.

Kode Vue.js 3 yang menunjukkan event handling tombol dan lifecycle hook onMounted

10. Form dan Validasi

Vue.js memudahkan pembuatan form interaktif dengan binding data dan validasi sederhana.

Contoh form dengan validasi sederhana:

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

const nama = ref('')
const error = ref('')

function submitForm() {
  if (!nama.value) {
    error.value = 'Nama wajib diisi!'
  } else {
    error.value = ''
    alert(`Halo, ${nama.value}!`)
  }
}
</script>

<template>
  <form @submit.prevent="submitForm" class="space-y-4">
    <div>
      <label for="nama" class="block font-semibold mb-1">Nama:</label>
      <input id="nama" v-model="nama" type="text" class="border border-gray-300 rounded px-3 py-2 w-full" />
      <p v-if="error" class="text-red-600 mt-1">{{ error }}</p>
    </div>
    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Kirim</button>
  </form>
</template>