Penggunaan NUXTjs untuk backend

banyak pengembang mengenal Nuxt.js sebagai framework frontend berbasis Vue. Namun, tahukah Anda bahwa Nuxt juga bisa digunakan sebagai backend untuk membuat API dan mengelola data server-side? Inilah yang membuat banyak pemula bingung—“Nuxt itu frontend atau backend?”—hingga ragu untuk memulai.

Mungkin Anda bertanya:

• “Apakah saya perlu Node.js Express terpisah?”
• “Bisakah Nuxt meng-handle database dan API?”
• “Bagaimana cara membuat backend langsung dari Nuxt?”

Tenang, artikel ini hadir untuk menjawab semua kebingungan itu.
Anda akan belajar bagaimana Nuxt 3 dengan Nitro Engine mampu bertindak sebagai backend ringan, membuat REST API, bahkan menghubungkan database—semuanya tanpa framework tambahan.

Di akhir artikel, Anda akan memahami:

• Cara kerja server-side di Nuxt
• Membuat API dengan server routes
• Contoh backend sederhana dalam Nuxt
• Kapan sebaiknya Nuxt dipakai sebagai backend

Apa Itu Backend dalam Nuxt.js?

Nuxt.js versi 3 dibekali Nitro Engine, yang memungkinkan Nuxt menjalankan fungsi server-side. Artinya, Anda dapat:

• Menangani request HTTP (GET, POST, dll.)
• Membuat endpoint API
• Mengakses database
• Menjalankan logic backend dalam folder server/

Inilah alasan mengapa Nuxt kini bukan hanya framework frontend, tapi bisa menjadi Fullstack Framework.

1. Struktur Backend di Nuxt.js

Untuk menggunakan Nuxt sebagai backend, Anda harus memahami folder berikut:

2. Membuat API Endpoint di Nuxt (Tanpa Express)

Cukup buat file di dalam folder /server/api.

Contoh: server/api/hello.get.ts

export default defineEventHandler(() => {
  return { message: 'Hello from Nuxt Backend!' }
})

export default defineEventHandler(() => {
  return { message: 'Hello from Nuxt Backend!' }
})

🔍 Akses di browser:

http://localhost:3000/api/hello

http://localhost:3000/api/hello

3. API dengan Parameter (Contoh Dynamic Route)

Buat file: server/api/user/[id].get.ts

export default defineEventHandler((event) => {
  const id = event.context.params.id
  return { userId: id, status: 'User found' }
})

export default defineEventHandler((event) => {
  const id = event.context.params.id
  return { userId: id, status: 'User found' }
})

Hasil:

http://localhost:3000/api/user/12
→ { "userId": "12", "status": "User found" }

http://localhost:3000/api/user/12
→ { "userId": "12", "status": "User found" }

4. Menangani POST Request (Insert Data)

File: server/api/contact.post.ts

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { success: true, data: body }
})

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { success: true, data: body }
})

Kirim request melalui fetch atau form dari frontend.

5. Menghubungkan Database (Contoh Prisma/MySQL)

Gunakan plugin di /server/plugins/prisma.ts

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default defineNitroPlugin(() => prisma)

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default defineNitroPlugin(() => prisma)

Sekarang Nuxt bisa CRUD langsung seperti backend Express.

6. Kapan Tepatnya Nuxt Cocok untuk Backend?

Anda sudah tahu bahwa Nuxt bukan hanya frontend, tapi dapat menjadi solusi backend ringan dan fullstack modern. Anda bisa membuat API, mengelola data, hingga terhubung dengan database—semuanya dalam satu repo.

Ingin memperdalam topik ini?
👉 Baca juga: Cara Membuat REST API CRUD di Nuxt 3 dengan Prisma & MySQL