nuxt / nuxt/modules

[Module Listing Request]: `Nuxt API SDK`

Open
#1,312 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

module-request
Dominant language
TypeScript
Stars
1.1k
Forks
354
Avg merge
10h 18m
Merged PRs (30d)
12

Description

Description

This module provides a thin wrapper around $fetch and is just a little bit of fun. It provides an "SDK" kinda way to call your server routes in nuxt!

It hooks into the nitro server's scannedHandlers object and generates a template in Nuxt-land so that in userland instead of this:

// example get
await $fetch(`/api/user/${uid}`, { method: 'get' })

// example post
await $fetch(`/api/user`, {
  method: 'post',
  body: { name: 'Jamie' }
})

You can now do this, with full autocompletion and type-safety:

// example get
await useApi().user.uid(uid).get()

// example post
await useApi().user.post({ body: { name: 'Jamie' } })

To type the body, I've introduced a defineBodyType server util that does nothing but return the type of the body.
I want to try and move to using the built in defineRouteMeta but couldn't figure out a way to extend it. Let me know if there's another way I can type up the request body.

Example usage on a server route:

type Body = Omit<User, 'uid'>
export const body = defineRouteType<Body>()

export default defineEventHandler(async (event) => {
  const body = await readBody<Body | undefined>(event)
  // etc..
})

I'm not precious about this - it was a reason to dive deeper into modules and Nitro, a bit of practice generating template files dynamically, and the result is kinda fun! 🍭 Maybe someone else will enjoy it too?

I've only tested with Nuxt 4, but I think it should work on v3 too.

Repository

https://github.com/jamiecurnow/nuxt-api-sdk

npm

https://www.npmjs.com/package/nuxt-api-sdk

Nuxt Compatibility

Nuxt 4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the linked nuxt-api-sdk repository and npm package first; the issue names no files, tests, or entry points in this repository. Done means identifying the module-listing change needed for this Nuxt 4 module and verifying the relevant project checks.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
tooling
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.