https://github.com/germondai/nuxt-superjson
Nuxt tRPC-like API integration with SuperJSON support
https://github.com/germondai/nuxt-superjson
api nuxt nuxt-module superjson trpc typescript vuejs
Last synced: 4 months ago
JSON representation
Nuxt tRPC-like API integration with SuperJSON support
- Host: GitHub
- URL: https://github.com/germondai/nuxt-superjson
- Owner: germondai
- Created: 2025-02-01T12:24:08.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2025-02-01T16:02:18.000Z (over 1 year ago)
- Last Synced: 2025-08-07T10:20:36.551Z (11 months ago)
- Topics: api, nuxt, nuxt-module, superjson, trpc, typescript, vuejs
- Language: TypeScript
- Homepage: https://npmjs.com/nuxt-superjson
- Size: 99.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Nuxt SuperJSON
### **Welcome** to **Nuxt SuperJSON**! 👋
**Nuxt** already provides a **tRPC-like** connection between the frontend and backend, but it has limitations when handling **rich types**. Typically, developers define **Payload reducers** and **reviver plugins** for each custom **type** or **class**. However, these plugins only revive data **on the first page load**, making subsequent fetches inconsistent.
To simplify this process, we introduce **utilities** that handles **SuperJSON serialization** for **API endpoints** using **`toSuperJSON`**, along with **response deserialization** via **`fromSuperJSON`**.
Additionally, we've created **`$superFetch`** and **`useSuperFetch`** to handle **fetch deserialization** seamlessly. This keeps your code **D-R-Y** and **effortless**, allowing you to focus on building features instead of dealing with data inconsistencies.
## Quick Setup
Install the module to your Nuxt application with one command:
```bash
npx nuxi module add nuxt-superjson
```
That's it! You can now use **SuperJSON** in your Nuxt app ✨
## Implementation
### Serialize API responses with `toSuperJSON`
```ts
export default defineEventHandler(() => {
return toSuperJSON({ date: new Date() })
})
```
### Retrieve deserialized SuperJSON data
```vue
{{ data }}
{{ data.date instanceof Date }} // true
// useFetch approach
const { data } = await useSuperFetch('/api')
// $fetch approach
const { $superFetch } = useNuxtApp()
const data = await $superFetch('/api')
```
## Recipes
### Custom $fetch with `fromSuperJSON`
```ts
const superApiFetch = $fetch.create({
parseResponse: fromSuperJSON,
headers: { Authorization: `Bearer ${token}` }
})
const data = await superApiFetch('/api')
```
### Custom useFetch with `fromSuperJSON`
```ts
const useSuperApiFetch: typeof useFetch = (
req: Parameters>[0],
opts: Parameters>[1],
) => useFetch(req, { ...opts, $fetch: superApiFetch })
const { data } = await useSuperApiFetch('/api')
```
## Contribution
Local development
```bash
# Install dependencies
npm install
# Generate type stubs
npm dev:prepare
# Develop with the playground
npm dev
# Build the playground
npm dev:build
# Run ESLint
npm lint
npm lint:fix
# Run Prettier
npm prettier
npm prettier:fix
# Run Vitest
npm test
npm test:watch
# Release new version
npm release
```
---
Made with ❤️ by
@germondai
[npm-version-src]: https://img.shields.io/npm/v/nuxt-superjson/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@vuei/nuxt
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-superjson.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/nuxt-superjson
[license-src]: https://img.shields.io/npm/l/nuxt-superjson.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-superjson
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com