nuxt-api-party

Nuxt 3 module to securely connect with any API.

• ✨  Release Notes
• 📖  Read the documentation

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

# pnpm
pnpm add -D nuxt-api-party

# npm
npm 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>

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

💻 Development

1. Clone this repository
2. Enable Corepack using corepack enable
3. Install dependencies using pnpm install
4. Run pnpm run dev:prepare
5. Start development server using pnpm run dev

Special Thanks

• Dennis Baum for sponsoring the initial version of this package.
• SVGBackgrounds.com for the OpenGraph image background pattern.

License

MIT License © 2022-2023 Johann Schopplich