Nuxt API Party

Nuxt module to securely connect to any API.

Features

🪅 Generated composables
🔒 Protected API credentials in the client
🪢 Token-based authentication built-in or bring your own headers
🧇 Connect multiple API endpoints
🍱 Feels just like useFetch
🗃 Cached responses
🦾 Strongly typed

Setup

!TIP📖 Read the documentation

npx nuxi@latest module add nuxt-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, pending, refresh, error } = await useJsonPlaceholderData('posts/1')
</script>

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