{"id":24955134,"url":"https://github.com/germondai/nuxt-superjson","last_synced_at":"2026-02-08T09:02:54.985Z","repository":{"id":275301449,"uuid":"925659266","full_name":"germondai/nuxt-superjson","owner":"germondai","description":"Nuxt tRPC-like API integration with SuperJSON support","archived":false,"fork":false,"pushed_at":"2025-02-01T16:02:18.000Z","size":102,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-08-07T10:20:36.551Z","etag":null,"topics":["api","nuxt","nuxt-module","superjson","trpc","typescript","vuejs"],"latest_commit_sha":null,"homepage":"https://npmjs.com/nuxt-superjson","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/germondai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-01T12:24:08.000Z","updated_at":"2025-02-01T15:52:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"21f61733-69e1-47e3-927e-b2c0a1be0f54","html_url":"https://github.com/germondai/nuxt-superjson","commit_stats":null,"previous_names":["germondai/nuxt-superjson"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/germondai/nuxt-superjson","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germondai%2Fnuxt-superjson","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germondai%2Fnuxt-superjson/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germondai%2Fnuxt-superjson/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germondai%2Fnuxt-superjson/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/germondai","download_url":"https://codeload.github.com/germondai/nuxt-superjson/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/germondai%2Fnuxt-superjson/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29225696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T06:05:31.539Z","status":"ssl_error","status_checked_at":"2026-02-08T05:58:33.853Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","nuxt","nuxt-module","superjson","trpc","typescript","vuejs"],"created_at":"2025-02-03T05:40:11.437Z","updated_at":"2026-02-08T09:02:54.979Z","avatar_url":"https://github.com/germondai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://germondai.com\" target=\"_blank\"\u003e\n    \u003cimg align=\"center\" src=\"https://skillicons.dev/icons?i=nuxt,vue,ts\" /\u003e\u003cbr/\u003e\u003cbr/\u003e\n    \u003cspan\u003eNuxt SuperJSON\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\n### **Welcome** to \u003ca href=\"https://germondai.com\" target=\"_blank\"\u003e**Nuxt SuperJSON**\u003c/a\u003e! 👋\n\n**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.\n\nTo simplify this process, we introduce **utilities** that handles **SuperJSON serialization** for **API endpoints** using **`toSuperJSON`**, along with **response deserialization** via **`fromSuperJSON`**.\n\nAdditionally, 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.\n\n## Quick Setup\n\nInstall the module to your Nuxt application with one command:\n\n```bash\nnpx nuxi module add nuxt-superjson\n```\n\nThat's it! You can now use **SuperJSON** in your Nuxt app ✨\n\n## Implementation\n\n### Serialize API responses with `toSuperJSON`\n\n```ts\nexport default defineEventHandler(() =\u003e {\n  return toSuperJSON({ date: new Date() })\n})\n```\n\n### Retrieve deserialized SuperJSON data\n\n```vue\n\u003ctemplate\u003e\n  \u003cpre\u003e\n    {{ data }}\n    {{ data.date instanceof Date }} // true\n  \u003c/pre\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\n// useFetch approach\nconst { data } = await useSuperFetch('/api')\n\n// $fetch approach\nconst { $superFetch } = useNuxtApp()\nconst data = await $superFetch('/api')\n\u003c/script\u003e\n```\n\n## Recipes\n\n### Custom $fetch with `fromSuperJSON` \n\n```ts\nconst superApiFetch = $fetch.create({\n  parseResponse: fromSuperJSON,\n  headers: { Authorization: `Bearer ${token}` }\n})\n\nconst data = await superApiFetch('/api')\n```\n\n### Custom useFetch with `fromSuperJSON` \n\n```ts\nconst useSuperApiFetch: typeof useFetch = \u003cT\u003e(\n  req: Parameters\u003ctypeof useFetch\u003cT\u003e\u003e[0],\n  opts: Parameters\u003ctypeof useFetch\u003cT\u003e\u003e[1],\n) =\u003e useFetch(req, { ...opts, $fetch: superApiFetch })\n\nconst { data } = await useSuperApiFetch('/api')\n```\n\n## Contribution\n\n\u003cdetails\u003e\n  \u003csummary\u003eLocal development\u003c/summary\u003e\n  \n  ```bash\n  # Install dependencies\n  npm install\n  \n  # Generate type stubs\n  npm dev:prepare\n  \n  # Develop with the playground\n  npm dev\n  \n  # Build the playground\n  npm dev:build\n  \n  # Run ESLint\n  npm lint\n  npm lint:fix\n\n  # Run Prettier\n  npm prettier\n  npm prettier:fix\n  \n  # Run Vitest\n  npm test\n  npm test:watch\n  \n  # Release new version\n  npm release\n  ```\n\n\u003c/details\u003e\n\n---\n\n\u003cp align=\"center\"\u003e\n    \u003cspan\u003eMade with ❤️ by\u003c/span\u003e\n    \u003ca href=\"https://github.com/germondai\" target=\"_blank\"\u003e@germondai\u003c/a\u003e\n\u003c/p\u003e\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-superjson/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://npmjs.com/package/@vuei/nuxt\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-superjson.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://npm.chart.dev/nuxt-superjson\n[license-src]: https://img.shields.io/npm/l/nuxt-superjson.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: https://npmjs.com/package/nuxt-superjson\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgermondai%2Fnuxt-superjson","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgermondai%2Fnuxt-superjson","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgermondai%2Fnuxt-superjson/lists"}