![Nuxt API Party module](https://github.com/johannschopplich/nuxt-api-party/raw/HEAD/./docs/public/og.jpg)
Nuxt API Party
Nuxt module to securely connect to any API.
Features
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:
export default defineNuxtConfig({
modules: ['nuxt-api-party'],
apiParty: {
endpoints: {
jsonPlaceholder: {
url: process.env.JSON_PLACEHOLDER_API_BASE_URL!,
headers: {
Authorization: `Bearer ${process.env.JSON_PLACEHOLDER_API_TOKEN}`
}
}
}
}
})
If you were to call your API jsonPlaceholder
, the generated composables are:
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
License
MIT License © 2022-PRESENT Johann Schopplich