nuxt-actionsType-Safe Server Actions for Nuxt

Validated inputs, middleware chains, builder pattern, and optimistic updates. Works with Zod, Valibot, and ArkType through Standard Schema.

Get Started

Examples

Playground

Standard Schema Validation

Use Zod, Valibot, ArkType, or any Standard Schema library. No vendor lock-in, no adapters.

Builder Pattern

Compose actions with shared middleware, schemas, and metadata using createActionClient().

Optimistic Updates

useOptimisticAction composable with instant UI feedback and automatic rollback on server error.

Middleware Chain

Reusable, composable middleware with typed context accumulation. Publishable as npm packages.

Output Validation

Validate server responses, not just inputs. Catch data leaks and contract violations before they reach the client.

Zero Config

Install, add to nuxt.config modules, done. All utilities -- defineAction, useAction, defineMiddleware -- are auto-imported.

Quick Example

Define a validated server action:

// server/api/todos.post.ts
import { z } from 'zod'

export default defineAction({
  input: z.object({
    title: z.string().min(1, 'Title is required'),
  }),
  handler: async ({ input }) => {
    return await db.todo.create({ data: { title: input.title } })
  },
})

Call it from any component:

vue

<script setup lang="ts">
const { execute, data, error, status } = useAction<
  { title: string },
  { id: number; title: string }
>('/api/todos')

async function addTodo() {
  await execute({ title: 'Buy milk' })
}
</script>

<template>
  <button @click="addTodo" :disabled="status === 'executing'">
    Add Todo
  </button>
  <p v-if="data">Created: {{ data.title }}</p>
  <p v-if="error" class="error">{{ error.message }}</p>
</template>

You get validated input, typed handler parameters, reactive state management, and a consistent error format -- with zero configuration.

Read the full guide