Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johannschopplich/nuxt-api-party
🐬 Securely connect to any API with a server proxy and generated composables
https://github.com/johannschopplich/nuxt-api-party
nuxt nuxt-auth nuxt-module nuxt-proxy
Last synced: 6 days ago
JSON representation
🐬 Securely connect to any API with a server proxy and generated composables
- Host: GitHub
- URL: https://github.com/johannschopplich/nuxt-api-party
- Owner: johannschopplich
- License: mit
- Created: 2022-10-07T15:01:27.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T10:28:24.000Z (15 days ago)
- Last Synced: 2024-09-18T17:45:00.794Z (15 days ago)
- Topics: nuxt, nuxt-auth, nuxt-module, nuxt-proxy
- Language: TypeScript
- Homepage: https://nuxt-api-party.byjohann.dev
- Size: 4.52 MB
- Stars: 248
- Watchers: 6
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://nuxt-api-party.byjohann.dev)
# Nuxt API Party
[Nuxt](https://nuxt.com) module to securely connect to any API.
- [✨ Release Notes](https://github.com/johannschopplich/nuxt-api-party/releases)
- [📖 Read the documentation](https://nuxt-api-party.byjohann.dev)
## Features
- 🪅 [Generated composables](https://nuxt-api-party.byjohann.dev/api/#generated-composables)
- 🔒 Protected API credentials in the client
- 🪢 Token-based authentication built-in or bring your own headers
- 🧇 [Connect multiple API endpoints](#basic-usage)
- 🍱 Feels just like [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch)
- 🗃 Cached responses
- 🦾 Strongly typed
## Setup
> [!TIP]
> [📖 Read the documentation](https://nuxt-api-party.byjohann.dev)
```bash
npx nuxi@latest module add nuxt-api-party
```
## Basic Usage
> [!TIP]
> [📖 Read the documentation](https://nuxt-api-party.byjohann.dev)
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:
```ts
// `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`](https://nuxt.com/docs/api/utils/dollarfetch#fetch)
- `useJsonPlaceholderData` – Returns [multiple values](https://nuxt-api-party.byjohann.dev/api/use-fetch-like.html#return-values) similar to [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch)
Use these composables in your templates or components:
```vue
const { data, refresh, error, status, clear } = await useJsonPlaceholderData('posts/1')
{{ data?.title }}
{{ JSON.stringify(data, undefined, 2) }}
```
> [!TIP]
> You can connect as many APIs as you want, just add them to the `endpoints` object.
## 💻 Development
1. Clone this repository
2. Enable [Corepack](https://github.com/nodejs/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](https://github.com/dennisbaum) for sponsoring the initial version of this package.
- [Maronbeere](https://maronbeere.carrd.co) for his logo pixel art.
## License
[MIT](./LICENSE) License © 2022-PRESENT [Johann Schopplich](https://github.com/johannschopplich)