Cara Deploy Vue ke Netlify

Aplikasi Vue yang di-build jadi berkas statis cocok sekali dengan Netlify. Prosesnya lima menit — dengan satu langkah yang tidak boleh dilewat kalau kamu memakai Vue Router dalam mode history, yaitu mayoritas project Vue.

Yang perlu disiapkan

• Node.js 20 atau lebih baru — cek dengan node -v.
• Akun Netlify, paket gratis cukup.
• Project Vue yang jalan dengan npm run dev atau npm run serve.
• Repositori Git.

Langkah 1: Kenali build tool-mu

Kabar baiknya, keduanya sama-sama menghasilkan dist — jadi setelannya identik.

Langkah 2: Buat netlify.toml

Bikin di root project:

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Menaruh konfigurasi di repositori lebih baik daripada mengisinya di dashboard — ikut ter-versi, dan berlaku sama untuk siapa pun yang meng-clone repo.

Langkah 3: Kenapa blok redirect itu wajib

Kalau routermu dibuat dengan createWebHistory() — bawaan Vue Router modern — URL-mu bersih tanpa tanda pagar: /tentang, bukan /#/tentang.

Konsekuensinya, saat halaman di-refresh, browser benar-benar meminta /tentang ke server. Server mencari berkas bernama tentang, tidak menemukannya, dan mengembalikan 404.

Aturan redirect tadi menyuruh Netlify mengembalikan index.html untuk semua rute dengan status 200. Aplikasimu termuat, lalu Vue Router membaca URL dan menampilkan komponen yang benar.

Alternatifnya, pakai createWebHashHistory() yang tidak butuh konfigurasi server sama sekali. Tapi URL-mu jadi mengandung #, dan mesin pencari memperlakukan bagian setelah tanda pagar sebagai bagian dari halaman yang sama — buruk untuk SEO. Untuk situs publik, tetap pakai createWebHistory() plus aturan redirect.

Langkah 4: Hubungkan repositori

1. Push project-mu ke GitHub, GitLab, atau Bitbucket.
2. Di dashboard Netlify, klik Add new site lalu Import an existing project.
3. Pilih repositorimu.
4. Netlify membaca netlify.toml dan mengisi setelannya sendiri.
5. Klik Deploy site.

Situsmu live di alamat acak yang bisa diganti lewat Site configuration lalu Change site name. Setiap push berikutnya jadi deploy otomatis.

Langkah 5: Environment variable

Daftarkan di Site configuration lalu Environment variables. Prefiksnya berbeda antara Vite dan Vue CLI:

Variabel dibaca saat build, jadi setelah menambahkan yang baru jalankan Trigger deploy lalu Clear cache and deploy site.

Langkah 6: Form tanpa backend

Netlify bisa menerima submission form tanpa server. Tapi untuk aplikasi Vue ada satu jebakan: Netlify memindai HTML statis saat deploy, dan form yang dirender Vue di browser tidak akan terdeteksi.

Solusinya, tambahkan form tersembunyi di index.html supaya Netlify melihatnya saat build:

<form name="kontak" netlify hidden>
  <input type="text" name="nama">
  <input type="email" name="email">
  <textarea name="pesan"></textarea>
</form>

Lalu di komponen Vue-mu, kirim datanya sebagai POST ke root situs:

async function kirim() {
  await fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      'form-name': 'kontak',
      nama: form.nama,
      email: form.email,
      pesan: form.pesan
    }).toString()
  });
}

Nilai form-name harus sama persis dengan atribut name di form tersembunyi tadi.

Langkah 7: Pasang domain sendiri

Buka Domain management lalu Add a domain. Cara paling mudah adalah memindahkan nameserver ke Netlify DNS, karena domain root ditangani otomatis. Sertifikat SSL diterbitkan otomatis setelah DNS terverifikasi.

Detailnya ada di panduan custom domain dan SSL.

Masalah yang sering muncul

404 saat refresh

Aturan redirect belum ada atau statusnya bukan 200. Cek juga apakah netlify.toml benar-benar ter-commit — ini lebih sering terjadi daripada dugaan.

Halaman putih tanpa error

Buka Console. Kalau penuh 404 untuk berkas .js dan .css, kemungkinan besar base di vite.config.js diisi nilai yang tidak sesuai. Untuk situs di root domain, nilainya harus /.

Build gagal padahal jalan di lokal

Kapitalisasi nama berkas — Linux membedakan MyComponent.vue dan mycomponent.vue, laptopmu tidak. Periksa semua impor komponenmu.

Error "Failed to resolve component"

Biasanya juga soal kapitalisasi, atau komponen yang didaftarkan dengan nama berbeda dari nama berkasnya. Konsisten pakai PascalCase untuk nama berkas komponen.

Aset di folder public tidak muncul

Berkas di public/ disalin apa adanya, jadi rujuk dengan path absolut /logo.png. Untuk aset yang ikut diproses build, taruh di src/assets/ dan impor:

import logo from '@/assets/logo.png';

Batas paket gratis Netlify

Ringkasan

Kalau aplikasimu butuh render sisi server atau SEO yang lebih kuat, pertimbangkan Nuxt — lihat cara deploy Nuxt ke Vercel. Untuk gambaran menyeluruh, mulai dari panduan lengkap deploy website.