Nuxt module to securely connect to any API.
- πͺ 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
npx nuxi@latest module add nuxt-api-party
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 touseFetch
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>
Tip
You can connect as many APIs as you want, just add them to the endpoints
object.
- 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
- Dennis Baum for sponsoring the initial version of this package.
- Maronbeere for his logo pixel art.
MIT License Β© 2022-PRESENT Johann Schopplich