Pembuatan API untuk NUXTjs

Anda menggunakan Nuxt.js dan ingin menampilkan data dinamis, tapi bingung dari mana API itu berasal? Atau bahkan masih bertanya-tanya, “apa sebenarnya API dan bagaimana cara membuatnya?” Tenang—Anda tidak sendirian. Banyak pemula merasa kesulitan memahami hubungan antara frontend (Nuxt.js) dan backend (API), sehingga akhirnya hanya menggunakan data statis di aplikasi mereka.

Artikel ini hadir sebagai solusi lengkap untuk Anda. Di sini, Anda akan belajar cara membuat API sederhana (menggunakan Node.js/Express atau langsung di Nuxt 3 dengan server routes), serta bagaimana cara mengaksesnya dari Nuxt.js. Kami akan membimbing Anda langkah demi langkah—dari konsep dasar hingga pengujian API, tanpa melewati hal penting.

Setelah membaca artikel ini, Anda akan memahami:

• Apa itu API dan bagaimana bekerja dengan Nuxt.js
• Cara membuat API backend dengan Node.js / Express
• Cara menghubungkan API ke Nuxt.js dengan useFetch atau axios
• Tips mengatasi error umum saat integrasi API

Apa Itu API dan Mengapa Penting di Nuxt.js?

API (Application Programming Interface) adalah jembatan yang memungkinkan frontend mengambil data dari server. Tanpa API, aplikasi Nuxt.js Anda hanya akan berisi data statis. Dengan API, Anda bisa menampilkan produk, artikel, atau data dinamis lainnya dari backend.

Opsi Pembuatan API untuk Nuxt.js

Ada dua pendekatan utama:

1. Menggunakan Backend Terpisah (Node.js + Express, Laravel, dll.)
2. API Langsung di Nuxt 3 menggunakan Server Routes (/server/api)

Langkah-Langkah Pembuatan API untuk NUXTjs

Langkah 1 – Membuat API Backend (Node.js + Express)

1.Buat Folder Backend dan Inisialisasi Project

mkdir backend-api
cd backend-api
npm init -y
npm install express cors

mkdir backend-api
cd backend-api
npm init -y
npm install express cors

2. Buat File index.js

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

app.get('/api/products', (req, res) => {
  res.json([
    { id: 1, name: 'Produk A', price: 10000 },
    { id: 2, name: 'Produk B', price: 20000 }
  ]);
});

app.listen(3001, () => {
  console.log('API berjalan di http://localhost:3001');
});

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

app.get('/api/products', (req, res) => {
  res.json([
    { id: 1, name: 'Produk A', price: 10000 },
    { id: 2, name: 'Produk B', price: 20000 }
  ]);
});

app.listen(3001, () => {
  console.log('API berjalan di http://localhost:3001');
});

3.Jalankan API

node index.js

node index.js

Langkah 2 – Mengambil Data API di Nuxt.js

Gunakan useFetch() (Nuxt 3) atau axios:

Contoh untuk Nuxt 3 (useFetch)

<script setup>
const { data: products } = await useFetch('http://localhost:3001/api/products')
</script>

<template>
  <div>
    <h1>Daftar Produk</h1>
    <ul>
      <li v-for="item in products" :key="item.id">
        {{ item.name }} - Rp {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script setup>
const { data: products } = await useFetch('http://localhost:3001/api/products')
</script>

<template>
  <div>
    <h1>Daftar Produk</h1>
    <ul>
      <li v-for="item in products" :key="item.id">
        {{ item.name }} - Rp {{ item.price }}
      </li>
    </ul>
  </div>
</template>

Langkah 3 – API Langsung di Nuxt 3 (Tanpa Backend Terpisah)

🗂 Struktur Folder:

/server/api/products.js

/server/api/products.js

📁 Buat file: /server/api/products.js

export default defineEventHandler(() => {
  return [
    { id: 1, name: 'Produk X', price: 15000 },
    { id: 2, name: 'Produk Y', price: 30000 }
  ]
})

export default defineEventHandler(() => {
  return [
    { id: 1, name: 'Produk X', price: 15000 },
    { id: 2, name: 'Produk Y', price: 30000 }
  ]
})

Lalu ambil di halaman Nuxt:

<script setup>
const { data: products } = await useFetch('/api/products')
</script>

<script setup>
const { data: products } = await useFetch('/api/products')
</script>

Tips & Error Umum

Anda sudah memahami cara membuat API dan menghubungkannya ke Nuxt.js. Dengan dasar ini, Anda bisa membangun aplikasi yang jauh lebih dinamis, seperti e-commerce, blog, dashboard admin, dan lainnya.

Ingin memperdalam backend?
Baca juga: “Mengenal REST API dan Struktur Endpoint untuk Pemula.”