Nuxt Fetch Transforms

Automatically generate fetch transforms for your Nuxt application.

• ✨  Release Notes
• 🏀 Online playground

Features

Automatically generate fetch transforms for your Nuxt application.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @nasontech/nuxt-fetch-transforms

That's it! You can now use useFetchTransform in your Nuxt app ✨

<script setup>
const { data: user, refresh } = await useFetch('/api/user', { transform: useFetchTransform('/api/user', 'get') })
</script>

<template>
  <div>
    <pre>{{ user }}</pre>
    <div>Typeof user.createdAt: {{ typeof user.createdAt }} {{ user.createdAt.constructor.name }}</div>
    <div>Typeof user.updatedAt: {{ typeof user.updatedAt }} {{ user.updatedAt.constructor.name }}</div>
    <div>
      <button @click="refresh">Refresh</button>
    </div>
  </div>
</template>

export default defineEventHandler(async (event) => {
  const user = {
    id: '1',
    name: 'John Doe',
    email: 'john.doe@example.com',
    createdAt: new Date(),
    updatedAt: new Date(),
  }

  return user
})

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release