nuxt-api-party

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

Nuxt API Party

Nuxt module that provides seamless integration with multiple API endpoints. It generates type-safe composables for each API endpoint you configure, offering a familiar developer experience similar to Nuxt's useFetch and $fetch while keeping your API credentials secure and eliminating CORS issues through a server proxy.

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

!TIP📖 Read the documentation

npx nuxt module add api-party

Basic Usage

!TIP📖 Read the documentation

Add the Nuxt API Party to your Nuxt config and prepare your first API connection by setting an endpoint object with the following properties for 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.

💻 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

Special Thanks

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