v0.4.1 — Now with HTTP method support

Type-safe Server Actions
for Nuxt

Define actions on the server with Zod validation and middleware. Call them from the client with full type inference, reactive status tracking, and field-level validation errors.

Get Started GitHub

How it works

Define on the server. Use on the client. Types flow automatically.

server/actions/create-post.tsServer
import { z } from 'zod'
import { actionClient } from '../utils/action-client'

export default actionClient
  .schema(z.object({
    title: z.string().min(1).max(200),
    body: z.string().min(1),
  }))
  .action(async ({ parsedInput }) => {
    const post = await db.post.create({
      data: parsedInput,
    })
    return { id: post.id, title: post.title }
  })

Full type inference

components/CreatePost.vueClient
<script setup lang="ts">
import { createPost } from '#safe-action/actions'

const { execute, data, isExecuting } = useAction(
  createPost,
  {
    onSuccess({ data }) {
      console.log('Created:', data.title)
    },
  }
)
</script>

<template>
  <form @submit.prevent="execute(formData)">
    <button :disabled="isExecuting">
      {{ isExecuting ? 'Creating...' : 'Create' }}
    </button>
  </form>
</template>

server/actions/create-post.ts
import { z } from 'zod'
import { actionClient } from '../utils/action-client'

export default actionClient
  .schema(z.object({
    title: z.string().min(1).max(200),
    body: z.string().min(1),
  }))
  .action(async ({ parsedInput }) => {
    const post = await db.post.create({
      data: parsedInput,
    })
    return { id: post.id, title: post.title }
  })

Features

Everything you need for safe, validated server-client communication.

End-to-end Type Safety

Input and output types flow from server to client automatically. No manual type definitions needed.

Input Validation

Zod schemas validate input before your handler runs. Validation errors are returned per-field.

Composable Middleware

Chain auth checks, logging, rate limiting, and more with fully typed context passing.

Reactive Composable

useAction gives you status, data, validationErrors, and lifecycle callbacks out of the box.

Auto Route Generation

Drop files in server/actions/ and API routes are created for you. Zero configuration.

H3Event Access

Full request context available in middleware and handlers. Read cookies, headers, sessions.

Ready to get started?

Add nuxt-safe-action to your project in seconds.

Read the Docs Try on StackBlitz

Type-safe Server Actions for Nuxt