Belajar Vue.js: Panduan Lengkap untuk Pemula

Apa Itu Vue.js?

Vue.js adalah framework JavaScript progresif untuk membangun user interface. Dibuat oleh Evan You pada tahun 2014, Vue dirancang untuk bisa diadopsi secara incremental.

Mengapa Vue.js?

• Easy to Learn – Sintaks sederhana, mudah untuk pemula
• Progressive – Bisa digunakan sebagian atau keseluruhan
• Performa Tinggi – Virtual DOM, reactivity system yang efisien
• Excellent Docs – Dokumentasi terbaik di antara framework JS
• Vue 3 Composition API – Lebih flexible dan reusable
• Ekosistem – Vue Router, Pinia, Nuxt.js

Roadmap Belajar Vue.js

Level 1: Beginner

• Setup – Vue CLI, Vite, CDN
• Template Syntax – Mustache, v-bind, v-on, v-if, v-for, v-model
• Reactivity – ref, reactive, computed, watch
• Components – SFC, props, emits
• Events – click, submit, event modifiers
• Forms – v-model, form validation

Level 2: Intermediate

• Composition API – setup, ref, reactive, computed, watch, onMounted
• Vue Router – Routes, nested routes, navigation guards
• Pinia – State management
• Composables – Reusable logic
• Slots – Default, named, scoped slots

Level 3: Advanced

• Nuxt.js – SSR, SSG, file-based routing
• TypeScript + Vue – Typing props, composables
• Testing – Vitest, Vue Test Utils
• Performance – Lazy loading, code splitting

Level 4: Expert

• Architecture – Feature-based structure
• Micro-Frontends – Module Federation
• Vue 3 Reactivity Deep Dive – Proxy, effect
• Plugin Development – Creating Vue plugins

Contoh Kode Vue.js

<template>
  <div class="app">
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Tambah</button>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.nama }} - Rp {{ item.harga }}
      </li>
    </ul>
    <input v-model="search" placeholder="Cari..." />
  </div>
</template>

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

const title = ref('Belajar Vue.js');
const count = ref(0);
const search = ref('');
const items = ref([
  { id: 1, nama: 'Laptop', harga: 10000000 },
  { id: 2, nama: 'Mouse', harga: 250000 }
]);

const filteredItems = computed(() => {
  return items.value.filter(item =>
    item.nama.toLowerCase().includes(search.value.toLowerCase())
  );
});

function increment() {
  count.value++;
}

onMounted(() => {
  console.log('Component mounted!');
});
</script>

Tips Belajar Vue.js

1. Pelajari JavaScript dulu – ES6+, async/await
2. Mulai dengan Options API – Lebih mudah untuk pemula
3. Lalu pelajari Composition API – Lebih powerful
4. Gunakan Vite – Build tool modern dan cepat
5. Pelajari Pinia – State management resmi Vue 3
6. Baca Vue Docs – vuejs.org (dokumentasi excellent)
7. Bangun project nyata – Todo app, weather app, blog

Tools yang Dibutuhkan

Kesimpulan

Vue.js adalah framework yang mudah dipelajari dan powerful. Dengan dokumentasi excellent dan learning curve yang gentle, Vue adalah pilihan great untuk pemula maupun experienced developer.

“Vue.js is designed to be incrementally adoptable.” – Evan You