nuxt-api-partyGetting Started
This guide will walk you through the steps to get started with nuxt-api-party.
Step 1: Install nuxt-api-party
pnpm add -D nuxt-api-partypnpm add -D nuxt-api-partyyarn add -D nuxt-api-partyyarn add -D nuxt-api-partynpm install -D nuxt-api-partynpm install -D nuxt-api-partyStep 2: Use nuxt-api-party
Add nuxt-api-party to your Nuxt configuration:
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-api-party']
})// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-api-party']
})Step 3: Set Up API Endpoints
Prepare your first API connection by setting an endpoint object. Each key represents an endpoint ID, which is used to generate the composables. The value is an object with the following properties:
url: The URL of the API endpointtoken: The API token to use for the endpoint (optional)query: Query parameters to send with each request (optional)headers: Headers to send with each request (optional)
// `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!}`
}
}
}
}
})// `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!}`
}
}
}
}
})For the API endpoint jsonPlaceholder above, the following composables are generated:
$jsonPlaceholder– Returns the response data, similar to$fetchuseJsonPlaceholderData– Returns multiple values similar touseFetch
TIP
Connect to as many API endpoints as you like. Each endpoint will generate two composables.
Runtime Config
Instead of the apiParty module option, you can also use the runtime config to set your API endpoints:
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-api-party'],
runtimeConfig: {
apiParty: {
endpoints: {
jsonPlaceholder: {
url: '',
token: ''
}
}
}
}
})// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-api-party'],
runtimeConfig: {
apiParty: {
endpoints: {
jsonPlaceholder: {
url: '',
token: ''
}
}
}
}
})Leveraging automatically replaced public runtime config values by matching environment variables at runtime, set your desired option in your project's .env file:
NUXT_API_PARTY_ENDPOINTS_JSON_PLACEHOLDER_URL=https://jsonplaceholder.typicode.com
NUXT_API_PARTY_ENDPOINTS_JSON_PLACEHOLDER_TOKEN=NUXT_API_PARTY_ENDPOINTS_JSON_PLACEHOLDER_URL=https://jsonplaceholder.typicode.com
NUXT_API_PARTY_ENDPOINTS_JSON_PLACEHOLDER_TOKEN=Step 4: Send Requests
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><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>Step. 5: Your Turn
Create something awesome! I'm eager to find out what you have built. Drop me a line, if you want.