Website

Tutorial Lengkap Deploy Website Nuxt.js 4 ke Vercel dengan Backend API

SS Fauzi19 Januari 2026 2 menit baca 426 kali dibaca
Tutorial Lengkap Deploy Website Nuxt.js 4 ke Vercel dengan Backend API

Pada tutorial ini kita akan membahas cara deploy aplikasi frontend menggunakan Nuxt.js 4 ke Vercel dan menghubungkannya dengan backend API Laravel. Tutorial ini cocok untuk: Pemula yang baru belajar deploy Nuxt.js Developer yang ingin memisahkan frontend dan backend Project Fullstack menggunakan Nuxt + API Deployment production dengan Vercel

✅ Persiapan

Sebelum mulai pastikan sudah memiliki:

  • Akun GitHub

  • Akun Vercel

  • Project Nuxt.js 4

  • Backend Laravel API

  • Node.js versi terbaru

  • Git

1. Membuat Project Baru di Vercel

Masuk ke dashboard Vercel terlebih dahulu, kemudian menuju ke menu Projects. Setelah itu klik tombol Add New Project yang berada di pojok kanan atas halaman dashboard untuk mulai melakukan proses deploy aplikasi Nuxt.js Anda.

2. Import Repository Project dari GitHub

Setelah berhasil masuk ke halaman import project, nantinya akan muncul daftar repository GitHub yang terhubung dengan akun Vercel Anda. Pastikan akun GitHub sudah terkoneksi dengan benar ke Vercel agar repository dapat ditampilkan. Selanjutnya cari repository project Nuxt.js yang ingin di-deploy, lalu klik tombol Import pada repository tersebut untuk melanjutkan proses konfigurasi deployment.

Import Project dari GitHub

3. Konfigurasi Build Command dan Environment Variables

Setelah repository berhasil diimport, Anda akan diarahkan ke halaman konfigurasi deployment project. Pada tahap ini terdapat beberapa pengaturan penting yang perlu disesuaikan:

  • Masuk ke bagian Build and Output Settings

  • Aktifkan opsi Override Build Command

  • Isi build command dengan:

    npm run generate

Pengaturan ini digunakan agar Nuxt.js melakukan proses generate static build sebelum aplikasi dideploy ke server Vercel.

Command generate Nuxt.js

Selanjutnya scroll ke bagian Environment Variables untuk menambahkan konfigurasi API backend Laravel Anda.

Tambahkan environment variable seperti berikut:

Key:
NUXT_API_PUBLIC

Value:
https://admin.contoh.com

Sesuaikan value tersebut dengan domain backend API Laravel milik Anda masing-masing.

Environment variable ini nantinya digunakan oleh aplikasi Nuxt.js agar dapat terhubung dengan backend Laravel API saat aplikasi berjalan di mode production.

Setup env file

Jika seluruh konfigurasi sudah selesai dilakukan, klik tombol Deploy dan tunggu proses build hingga selesai. Apabila deployment berhasil, maka aplikasi Nuxt.js Anda sudah berhasil online dan siap digunakan melalui domain yang diberikan oleh Vercel.