# Dokumentasi Implementasi Proxy API (Nuxt 3)

Dokumen ini menjelaskan cara menggunakan dan menambah proxy API di file `nuxt.config.ts` untuk menangani masalah CORS dan menyederhanakan pemanggilan endpoint backend.

## 1. Menambah Proxy Baru di `nuxt.config.ts`

Jika Anda memiliki API backend lain (misalnya departemen berbeda atau IP berbeda), Anda cukup menambah baris baru di dalam objek `routeRules`.

### Contoh Konfigurasi:

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Proxy untuk Statistik (yang sudah ada)
    "/stats-api/**": {
      proxy: "http://10.10.150.100:8084/api/v1/**",
    },

    // Proxy untuk API Pasien (Contoh Tambahan)
    "/patient-api/**": {
      proxy: "http://10.10.150.101:8000/api/v2/**",
    },

    // Proxy untuk API Antrean (IP sama, prefix path berbeda)
    "/queue-api/**": {
      proxy: "http://10.10.150.100:8084/api/v1/queue/**",
    },
  },
});
```

---

## 2. Cara Menggunakan di Composable

Setelah didaftarkan di `nuxt.config.ts`, Anda tidak perlu lagi menulis IP Address di dalam kode Vue/TypeScript Anda. Gunakan path prefix yang sudah didefinisikan.

### Contoh File: `composables/usePatientAPI.ts`

```typescript
export const usePatientAPI = () => {
  const fetchPatient = async (id: string) => {
    // Alamat asli: http://10.10.150.101:8000/api/v2/patient/123
    // Cukup panggil seperti ini:
    return await $fetch(`/patient-api/patient/${id}`);
  };

  return { fetchPatient };
};
```

---

## 3. Keuntungan Menggunakan Proxy

1.  **Menghindari CORS**: Browser tidak akan memblokir request karena seolah-olah request dikirim ke server yang sama dengan frontend.
2.  **Keamanan**: IP backend asli tidak terekspos secara langsung di kode frontend (Client-side).
3.  **Kemudahan Maintenance**: Jika IP Server backend berubah, Anda hanya perlu mengubah satu baris di `nuxt.config.ts` tanpa harus mencari dan mengganti di seluruh file `.vue` atau `.ts`.

---

## 4. Tips Debugging Proxy

- Jika menggunakan **Vite Dev Server**, pastikan Anda menjalankan ulang `npm run dev` setelah mengubah `nuxt.config.ts`.
- Cek tab **Network** di Developer Tools (F12). Anda akan melihat request ke `localhost:3000/stats-api/...` dan server Nuxt akan meneruskannya ke IP backend secara otomatis.