Cara Membuat Website dengan Vue.js: Panduan Pemula Lengkap 2026

Pendahuluan: Mengapa Belajar Cara Membuat Website dengan Vue.js?

Cara membuat website dengan Vue.js adalah salah satu jalur terbaik bagi Anda yang ingin terjun ke dunia frontend development modern. Vue.js - yang diciptakan oleh Evan You dan pertama kali dirilis pada 2014 - telah berkembang menjadi salah satu framework JavaScript paling dicintai di dunia. Dalam survei State of JS 2024, Vue konsisten berada di peringkat teratas dalam kategori satisfaction dan interest di antara para developer.

Keunggulan utama Vue.js dibandingkan framework lain adalah kurva belajar yang lebih landai. Vue dirancang dengan filosofi bahwa framework harus mudah diadopsi secara bertahap - Anda bisa mulai dengan menambahkan Vue ke halaman HTML biasa, lalu secara perlahan mempelajari fitur-fitur yang lebih canggih. Inilah yang membuat Vue menjadi pilihan ideal untuk pemula maupun developer berpengalaman yang ingin produktif dengan cepat.

Dalam panduan lengkap ini, Anda akan belajar cara membuat website dengan Vue.js dari nol: mulai dari instalasi environment, memahami konsep komponen dan Composition API, mengelola state global dengan Pinia, routing dengan Vue Router, hingga men-deploy website Vue ke hosting. Mari kita mulai!

Prasyarat Sebelum Belajar Vue.js

Sebelum masuk ke Vue.js, pastikan Anda sudah memahami dasar-dasar berikut:

• HTML dasar - struktur halaman, elemen semantik, form, dan atribut
• CSS dasar - selector, flexbox, grid, dan responsiveness
• JavaScript ES6+ - arrow function, destructuring, spread operator, array methods (map, filter), async/await, dan module import/export

Tidak seperti React yang membutuhkan pemahaman mendalam tentang JavaScript sebelum bisa produktif, Vue lebih ramah bagi pemula. Template syntax Vue sangat mirip HTML biasa, sehingga Anda bisa langsung melihat hasilnya lebih cepat.

Langkah 1: Menyiapkan Environment Development

Install Node.js dan npm

Vue.js memerlukan Node.js. Kunjungi nodejs.org dan unduh versi LTS terbaru. Verifikasi instalasi:

node --version
npm --version

Install Vue DevTools

Pasang ekstensi Vue DevTools di browser Chrome atau Firefox. Alat ini sangat membantu untuk debug komponen, memantau state, dan menelusuri event secara real-time.

Setup VS Code

Gunakan Visual Studio Code dengan ekstensi berikut:

• Vue - Official (Volar) - ekstensi resmi untuk Vue 3, menggantikan Vetur
• Prettier - Code formatter - format kode otomatis
• ESLint - deteksi error dan code style
• Tailwind CSS IntelliSense - jika menggunakan Tailwind CSS

Langkah 2: Membuat Proyek Vue Baru dengan Vite

Cara resmi dan tercepat untuk membuat proyek Vue baru di 2026 adalah menggunakan Vite melalui perintah create-vue:

npm create vue@latest nama-proyek-anda

Perintah ini akan menampilkan wizard interaktif. Pilihan yang direkomendasikan untuk proyek baru:

✔ Add TypeScript? → Yes
✔ Add JSX Support? → No
✔ Add Vue Router for Single Page Application development? → Yes
✔ Add Pinia for state management? → Yes
✔ Add Vitest for Unit Testing? → No (opsional untuk pemula)
✔ Add ESLint for code quality? → Yes
✔ Add Prettier for code formatting? → Yes

Setelah selesai, jalankan proyek:

cd nama-proyek-anda
npm install
npm run dev

Struktur Folder Proyek Vue

nama-proyek-anda/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/           ← gambar, font, CSS global
│   ├── components/       ← komponen reusable
│   ├── router/
│   │   └── index.ts      ← konfigurasi Vue Router
│   ├── stores/
│   │   └── counter.ts    ← Pinia store
│   ├── views/            ← halaman (dirender oleh router)
│   ├── App.vue           ← komponen root
│   └── main.ts           ← entry point
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Langkah 3: Memahami Single File Component (SFC)

Fitur paling khas Vue adalah Single File Component (.vue) - setiap file .vue menggabungkan template, logika, dan style dalam satu file yang terstruktur rapi.

Anatomi File .vue

<!-- src/components/KartuProduk.vue -->
<script setup lang="ts">
interface Props {
  nama: string;
  harga: string;
  deskripsi: string;
  populer?: boolean;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="kartu" :class="{ 'kartu-populer': props.populer }">
    <span v-if="props.populer" class="badge">Paling Populer</span>
    <h3>{{ props.nama }}</h3>
    <p class="harga">{{ props.harga }}</p>
    <p>{{ props.deskripsi }}</p>
    <button>Pilih Paket</button>
  </div>
</template>

<style scoped>
.kartu {
  border: 2px solid #e2e8f0;
  padding: 24px;
  border-radius: 8px;
}
.kartu-populer {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
</style>

Perhatikan atribut scoped pada <style> - ini memastikan CSS hanya berlaku untuk komponen tersebut dan tidak bocor ke komponen lain.

Langkah 4: Composition API - Cara Modern Menulis Logika Vue

Vue 3 memperkenalkan Composition API sebagai cara baru menulis logika komponen yang lebih fleksibel dan mudah diorganisir dibanding Options API lama.

Reaktivitas dengan ref dan reactive

<script setup lang="ts">
import { ref, reactive, computed } from "vue";

// ref untuk nilai primitif (string, number, boolean)
const hitungan = ref(0);
const nama = ref("Budi");

// reactive untuk objek
const pengguna = reactive({
  email: "",
  password: "",
  ingat: false,
});

// computed - nilai yang dihitung ulang saat dependensi berubah
const pesanSelamat = computed(() => {
  return hitungan.value > 0
    ? `Anda sudah klik ${hitungan.value} kali!`
    : "Belum ada klik.";
});

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

<template>
  <div>
    <p>{{ pesanSelamat }}</p>
    <button @click="tambah">Klik Saya</button>
    <button @click="hitungan = 0">Reset</button>
  </div>
</template>

Mengelola Form dengan v-model

Direktif v-model adalah fitur unggulan Vue - ia secara otomatis menghubungkan nilai input form dengan data reaktif (two-way data binding):

<script setup lang="ts">
import { reactive, ref } from "vue";

const form = reactive({
  nama: "",
  email: "",
  pesan: "",
});

const terkirim = ref(false);

function kirimForm() {
  console.log("Data terkirim:", form);
  terkirim.value = true;
}
</script>

<template>
  <div>
    <form v-if="!terkirim" @submit.prevent="kirimForm">
      <input v-model="form.nama" placeholder="Nama Lengkap" required />
      <input v-model="form.email" type="email" placeholder="Email" required />
      <textarea v-model="form.pesan" placeholder="Pesan Anda"></textarea>
      <button type="submit">Kirim Pesan</button>
    </form>
    <p v-else>Terima kasih! Pesan Anda telah terkirim.</p>
  </div>
</template>

Langkah 5: Direktif Bawaan Vue yang Wajib Dikuasai

Vue memiliki sejumlah direktif bawaan yang memperkaya HTML dengan logika dinamis:

v-for - Menampilkan List Data

<script setup lang="ts">
const paketHosting = [
  { id: 1, nama: "Starter", harga: "Rp 15.000/bln", storage: "5 GB" },
  { id: 2, nama: "Business", harga: "Rp 40.000/bln", storage: "20 GB" },
  { id: 3, nama: "Pro", harga: "Rp 75.000/bln", storage: "Unlimited" },
];
</script>

<template>
  <div class="grid">
    <div v-for="paket in paketHosting" :key="paket.id" class="kartu">
      <h3>{{ paket.nama }}</h3>
      <p>{{ paket.harga }}</p>
      <p>Storage: {{ paket.storage }}</p>
    </div>
  </div>
</template>

v-if / v-else-if / v-else - Kondisional

<template>
  <p v-if="status === 'aktif'">Akun Anda aktif.</p>
  <p v-else-if="status === 'pending'">Menunggu verifikasi...</p>
  <p v-else>Akun tidak aktif. Hubungi support.</p>
</template>

v-show - Toggle Visibilitas

<!-- v-show hanya toggle display:none, tidak meremove dari DOM -->
<div v-show="menuTerbuka" class="dropdown-menu">
  <!-- isi menu -->
</div>

Langkah 6: Fetching Data dengan Vue

Untuk mengambil data dari API, gunakan hook lifecycle onMounted bersama ref:

<script setup lang="ts">
import { ref, onMounted } from "vue";

interface Artikel {
  id: number;
  title: string;
  body: string;
}

const artikel = ref<Artikel[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);

onMounted(async () => {
  try {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/posts?_limit=5"
    );
    if (!res.ok) throw new Error("Gagal memuat data");
    artikel.value = await res.json();
  } catch (e) {
    error.value = "Terjadi kesalahan saat memuat artikel.";
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <div>
    <p v-if="loading">Memuat artikel...</p>
    <p v-else-if="error" class="error">{{ error }}</p>
    <article v-else v-for="post in artikel" :key="post.id">
      <h3>{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </article>
  </div>
</template>

Langkah 7: Navigasi Antar Halaman dengan Vue Router

Vue Router adalah library routing resmi Vue. Jika Anda memilihnya saat setup, konfigurasi dasar sudah ada di src/router/index.ts.

// src/router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import BerandaView from "@/views/BerandaView.vue";
import TentangView from "@/views/TentangView.vue";
import BlogView from "@/views/BlogView.vue";
import BlogDetailView from "@/views/BlogDetailView.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: "/", component: BerandaView },
    { path: "/tentang", component: TentangView },
    { path: "/blog", component: BlogView },
    { path: "/blog/:slug", component: BlogDetailView },
    { path: "/:pathMatch(.*)*", redirect: "/" },
  ],
});

export default router;

Gunakan <RouterLink> untuk navigasi (setara dengan <a> tapi tanpa reload):

<template>
  <nav>
    <RouterLink to="/">Beranda</RouterLink>
    <RouterLink to="/tentang">Tentang</RouterLink>
    <RouterLink to="/blog">Blog</RouterLink>
  </nav>
  <RouterView />  <!-- area render halaman -->
</template>

Langkah 8: State Management Global dengan Pinia

Pinia adalah library state management resmi Vue 3 - pengganti Vuex yang lebih sederhana dan intuitif. Gunakan Pinia untuk berbagi data antar komponen yang tidak memiliki hubungan parent-child langsung.

// src/stores/keranjang.ts
import { defineStore } from "pinia";
import { ref, computed } from "vue";

interface Produk {
  id: number;
  nama: string;
  harga: number;
}

export const useKeranjangStore = defineStore("keranjang", () => {
  const items = ref<Produk[]>([]);

  const total = computed(() =>
    items.value.reduce((sum, item) => sum + item.harga, 0)
  );

  function tambahItem(produk: Produk) {
    items.value.push(produk);
  }

  function hapusItem(id: number) {
    items.value = items.value.filter((item) => item.id !== id);
  }

  return { items, total, tambahItem, hapusItem };
});

Gunakan store di komponen mana pun:

<script setup lang="ts">
import { useKeranjangStore } from "@/stores/keranjang";

const keranjang = useKeranjangStore();
</script>

<template>
  <p>Total belanja: Rp {{ keranjang.total.toLocaleString("id-ID") }}</p>
</template>

Langkah 9: Build untuk Production

Setelah website selesai, build untuk production:

npm run build

Hasilnya adalah folder dist/ berisi file HTML, CSS, dan JavaScript yang sudah diminifikasi. Folder inilah yang akan Anda upload ke hosting.

Preview hasil build sebelum deploy:

npm run preview

Langkah 10: Deploy Website Vue ke Hosting

Opsi 1: Deploy ke Vercel (Termudah)

1. Push kode ke GitHub
2. Login ke vercel.com dengan akun GitHub
3. Klik "New Project" dan import repository
4. Vercel otomatis mendeteksi Vite + Vue dan mengatur build settings
5. Klik "Deploy" - selesai!

Opsi 2: Upload ke Shared Hosting (Hosting Indonesia)

Website Vue yang sudah di-build menghasilkan file statis, sehingga bisa dihost di shared hosting biasa seperti HostingEkspres:

1. Jalankan npm run build
2. Upload isi folder dist/ ke public_html/ via FTP atau File Manager cPanel
3. Buat file .htaccess untuk mendukung client-side routing Vue Router:

# .htaccess untuk Vue Router (History Mode)
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Opsi 3: Deploy ke VPS dengan Nginx

# Konfigurasi Nginx untuk Vue SPA
server {
    listen 80;
    server_name domainanda.com www.domainanda.com;
    root /var/www/html/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache aset statis 1 tahun
    location ~* .(js|css|png|jpg|gif|svg|ico|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

FAQ: Cara Membuat Website dengan Vue.js

Kesimpulan

Belajar cara membuat website dengan Vue.js adalah investasi yang sangat menguntungkan, terutama bagi Anda yang baru memulai perjalanan sebagai web developer. Dengan pendekatan yang progresif, sintaks yang bersih, dan ekosistem yang lengkap, Vue.js memungkinkan Anda membangun website modern dari yang sederhana hingga aplikasi enterprise yang kompleks.

Perjalanan belajar Vue dimulai dari memahami konsep Single File Component dan reaktivitas, kemudian berlanjut ke routing dengan Vue Router, state management global dengan Pinia, hingga pengambilan data dari API. Setiap konsep dibangun di atas fondasi yang sebelumnya - menjadikan kurva belajar Vue salah satu yang paling nyaman di antara framework JavaScript modern.

Ketika website Vue Anda siap dipublikasikan, pastikan memilih layanan hosting yang andal. Untuk website Vue statis, shared hosting sudah lebih dari cukup. Namun jika Anda membangun aplikasi Nuxt.js dengan Server-Side Rendering untuk performa SEO maksimal, pilih hosting Node.js atau VPS yang menjamin uptime tinggi dan latensi rendah untuk pengguna di Indonesia.