{"library":"nuxt-api-party","title":"Nuxt API Party","description":"Nuxt API Party is a module for Nuxt that streamlines secure and type-safe interaction with multiple API endpoints. It achieves this by generating composables dynamically for each configured API, similar in feel to Nuxt's native `useFetch` and `$fetch`. The module effectively secures API credentials and circumvents common CORS issues by proxying requests through a Nuxt server route. It features robust OpenAPI specification integration for generating fully typed API clients, offering enhanced developer experience and compile-time safety. The current stable version is 3.4.2, with frequent patch and minor releases addressing bugs and introducing new features. Its key differentiators include automated composable generation, strong type-safety via OpenAPI, built-in credential protection, and smart caching.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install nuxt-api-party"],"cli":null},"imports":["// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-api-party'],\n  apiParty: { /* ... */ }\n});","const { data, pending, error } = await useJsonPlaceholderData('posts/1');","const post = await $jsonPlaceholder('posts/1');","type Post = paths['/posts/{id}']['get']['responses']['200']['content']['application/json'];"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// nuxt.config.ts\nimport { defineNuxtConfig } from 'nuxt';\n\nexport default defineNuxtConfig({\n  modules: ['nuxt-api-party'],\n  apiParty: {\n    endpoints: {\n      jsonPlaceholder: {\n        url: process.env.JSON_PLACEHOLDER_API_BASE_URL ?? 'https://jsonplaceholder.typicode.com',\n        headers: {\n          // In a real app, use environment variables for tokens\n          Authorization: `Bearer ${process.env.JSON_PLACEHOLDER_API_TOKEN ?? 'your-mock-token'}`\n        }\n      },\n      myCustomApi: {\n        url: process.env.MY_CUSTOM_API_BASE_URL ?? 'http://localhost:3001/api',\n        headers: {\n          'X-Api-Key': process.env.MY_CUSTOM_API_KEY ?? 'another-mock-key'\n        }\n      }\n    }\n  }\n});\n\n// app.vue (or any Vue component/page)\n<script setup lang=\"ts\">\ninterface Post {\n  userId: number;\n  id: number;\n  title: string;\n  body: string;\n}\n\n// Use the auto-generated composable for jsonPlaceholder endpoint\nconst { data: postData, pending, error, refresh } = await useJsonPlaceholderData<Post>('posts/1');\n\n// Use the $api shorthand for another endpoint\nconst customApiResponse = await $myCustomApi('/data');\n</script>\n\n<template>\n  <div>\n    <h1>Nuxt API Party Example</h1>\n    <div v-if=\"pending\">Loading post...</div>\n    <div v-else-if=\"error\">Error loading post: {{ error.message }}</div>\n    <div v-else-if=\"postData\">\n      <h2>Post Title: {{ postData.title }}</h2>\n      <pre>{{ JSON.stringify(postData, null, 2) }}</pre>\n      <button @click=\"refresh\">Refresh Post</button>\n    </div>\n    <hr>\n    <h2>Custom API Response (from $myCustomApi)</h2>\n    <pre>{{ JSON.stringify(customApiResponse, null, 2) }}</pre>\n  </div>\n</template>","lang":"typescript","description":"This quickstart demonstrates configuring two API endpoints (`jsonPlaceholder` and `myCustomApi`) in `nuxt.config.ts` and then using their respective auto-generated composables (`useJsonPlaceholderData`) and `$api` fetchers (`$myCustomApi`) within a Vue component to fetch and display data.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}