nuxt-api-party

Nuxt module to securely connect with any API.

Features

🪅 Dynamic composable names
🔒 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

📖 Read the documentation

# pnpmpnpm add -D nuxt-api-party# npmnpm i -D nuxt-api-party

Basic Usage

📖 Read the documentation

Add this module 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>