nuxt-api-party

Securely connect to any API with a server proxy and dynamic composables

Nuxt API Party

Nuxt module to talk to APIs you don't control, with generated type-safe composables and a server proxy that keeps credentials off the client.

Features

🪅 Auto-generated composables for each API endpoint
🔒 Protected API credentials with Nuxt proxy route
🌐 No CORS issues
🍱 Familiar developer experience to useFetch and $fetch
🧇 Connect all your APIs
🦾 Fully typed API clients from OpenAPI specifications
🗃 Smart caching & hydration

Setup

npx nuxt module add api-party

Basic Usage

Add Nuxt API Party to your Nuxt configuration and describe your first API under the apiParty module option:

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-api-party'],

  apiParty: {
    endpoints: {
      jsonPlaceholder: {
        url: process.env.JSON_PLACEHOLDER_API_BASE_URL!,
        // Global headers sent with each request
        headers: {
          Authorization: `Bearer ${process.env.JSON_PLACEHOLDER_API_TOKEN}`
        }
      }
    }
  }
})

If you were to call your API jsonPlaceholder, the generated composables are:

$jsonPlaceholder – Returns the response data, similar to $fetch
useJsonPlaceholderData – Returns multiple values similar to useFetch

Use these composables in your templates or components:

<script setup lang="ts">
const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
</script>

<template>
  <h1>{{ data?.title }}</h1>
  <pre>{{ JSON.stringify(data, undefined, 2) }}</pre>
</template>

!TIP You can connect as many APIs as you want, just add them to the endpoints object.

The documentation covers the OpenAPI integration, caching and every module option.

💻 Development

Clone this repository
Enable Corepack using corepack enable
Install dependencies using pnpm install
Run pnpm run dev:prepare
Start development server using pnpm run dev

Credits

Dennis Baum for sponsoring the initial version of this package.
Konkon for his logo pixel art.