nuxt3-api-gen
v1.0.21
Published
This tool generates TypeScript types and API methods based on a Swagger/OpenAPI schema.
Maintainers
Readme
🚀 API Client Generator
This tool generates TypeScript types and API methods based on a Swagger/OpenAPI schema.
📋 Steps to Generate
download necessary files In the root folder of your frontend application, run the command to download the
composableandapi-genfolders.⚠️ Warning:
Make sure you do not have composable files nameduseApi.tsoruseApiService.ts. The script will overwrite them if they exist.If you already have files with these names, it's recommended to run the script in a different directory to safely download the
composableandapi-genfolders.npx nuxt3-api-genConfigure
swaggerUrl- Open your Swagger UI in a browser.
- Press
F12to open Developer Tools, go to the Network tab, and refresh the page. - Look for a
.jsonrequest (usually the Swagger schema), right-click it, and copy its URL. - Paste the URL into the
swaggerUrlfield insideconfig.json.
Run the generator
In your terminal, run one of the following commands:npm run api-gen # or node generate.cjs
📦 Output
After running the command, a directory named api will be created in the same location as the script (if it doesn't already exist).
Inside the api folder, two files will be generated:
apiScheme.types.ts— TypeScript types generated from the Swagger schema.apiScheme.ts— Grouped API methods based on tags defined in the Swagger spec.
These files are ready to use with the useApiService composable in your project.
🔧 Usage Example
<script lang="ts" setup>
const { data, error, status } = useApiService().users.getUserList();
// ...
</script>