### Install Nuxt Procedures Module

Source: https://github.com/andresberrios/nuxt-procedures/blob/main/README.md

Installs the `nuxt-procedures` module and its peer dependency `zod` using npm. This is the recommended way to set up the module for your Nuxt.js project.

```bash
npx nuxi module add nuxt-procedures
npm install zod
```

--------------------------------

### Manually Add Nuxt Procedures to nuxt.config.ts

Source: https://github.com/andresberrios/nuxt-procedures/blob/main/README.md

Manually installs the `nuxt-procedures` and `zod` packages and adds the module to the `nuxt.config.ts` file. This provides an alternative to the quick install command.

```bash
npm install nuxt-procedures zod
```

```typescript
export default defineNuxtConfig({
  modules: ["nuxt-procedures"],
});
```

--------------------------------

### SSR-Compatible Data Fetching with apiClient.procedure.useCall

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Wraps Nuxt's `useFetch` to enable server-side rendering and client-side hydration. Returns reactive data that automatically updates and supports loading states, making it ideal for initial page loads and component data fetching. Handles both simple and complex procedure calls with inputs and outputs.

```vue
<template>
  <div>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <h1>{{ greeting }}</h1>
      <h2>User Profile</h2>
      <p>Name: {{ user?.name }}</p>
      <p>Email: {{ user?.email }}</p>
      <p>Role: {{ user?.role }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
// Simple procedure call with loading state
const { data: greeting, pending, error } = await apiClient.hello.useCall("World");

// Complex procedure call with object input
const {
  data: user,
  pending: userPending,
  error: userError,
  refresh: refreshUser
} = await apiClient.users.create.useCall({
  name: "Alice Smith",
  email: "alice@example.com",
  role: "admin",
  metadata: {
    registrationSource: "mobile",
  },
});

// Refresh data programmatically
async function updateUser() {
  await refreshUser();
}
</script>
```

--------------------------------

### Procedure Folder Structure and Routing

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Defines how nested folders in `server/procedures` map to namespaced API clients. Demonstrates automatic client generation and how to access procedures at different nesting levels.

```typescript
// Folder structure:
// server/procedures/
//   ├── hello.ts
//   ├── users/
//   │   ├── create.ts
//   │   ├── update.ts
//   │   └── delete.ts
//   └── posts/
//       └── comments/
//           └── list.ts

// Automatically generated apiClient usage:
// Root level procedures
await apiClient.hello.call("World");

// Nested procedures (users folder)
await apiClient.users.create.call({ name: "John", email: "john@example.com" });
await apiClient.users.update.call({ id: "123", name: "Jane" });
await apiClient.users.delete.call({ id: "123" });

// Deeply nested procedures (posts/comments folder)
await apiClient.posts.comments.list.call({ postId: "456" });

// All procedures are accessible at /procedures/* endpoints
// Example: /procedures/hello, /procedures/users/create, /procedures/posts/comments/list
```

--------------------------------

### Nuxt Module Configuration for Nuxt Procedures

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Shows how to configure the Nuxt Procedures module in `nuxt.config.ts`. Includes options for enabling/disabling the module and customizing the server directory for procedure discovery.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-procedures"],

  // Optional: Configure module behavior
  procedures: {
    enabled: true, // Default: true, set to false to disable the module
  },

  // Optional: Customize server directory (affects procedure location)
  serverDir: "server", // Default: "server"
});
```

--------------------------------

### Define Simple Procedure with Zod

Source: https://github.com/andresberrios/nuxt-procedures/blob/main/README.md

Defines a simple backend procedure named 'hello' using Zod for input and output validation. The handler function takes a string input and returns a greeting string.

```typescript
import { z } from "zod";

export default defineProcedure({
  input: z.string(),
  output: z.string(),
  handler: async ({ input }) => {
    return `Hello, ${input}!`;
  },
});
```

--------------------------------

### Error Handling and Input/Output Validation with Zod

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Illustrates how Nuxt Procedures use Zod schemas for automatic input and output validation. Demonstrates defining validation schemas in procedures and catching validation errors on the client side.

```typescript
// server/procedures/validateUser.ts
import { z } from "zod";

export default defineProcedure({
  input: z.object({
    email: z.string().email("Invalid email format"),
    age: z.number().min(18, "Must be at least 18 years old"),
    username: z.string().min(3).max(20),
  }),
  output: z.object({
    valid: z.boolean(),
    message: z.string(),
  }),
  handler: async ({ input }) => {
    // Input is guaranteed to be valid here
    return {
      valid: true,
      message: `User ${input.username} validated successfully`,
    };
  },
});

// Client-side usage with error handling
async function validateUserForm() {
  try {
    const result = await apiClient.validateUser.call({
      email: "user@example.com",
      age: 25,
      username: "johndoe",
    });
    console.log(result.message);
  } catch (error) {
    if (error.statusCode === 500) {
      // Validation error - error.data contains Zod error details
      console.error("Validation errors:", error.data);
      // Example error.data structure:
      // {
      //   email: ["Invalid email format"],
      //   age: ["Must be at least 18 years old"]
      // }
    } else {
      console.error("Server error:", error.message);
    }
  }
}
```

--------------------------------

### Define Basic Server Procedure with Zod in Nuxt

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Defines a server-side procedure with string input and output schemas using Zod. It automatically handles validation, serialization, and creates an H3 event handler. Access to H3Event is provided for accessing request details like headers.

```typescript
import { z } from "zod";

export default defineProcedure({
  input: z.string(),
  output: z.string(),
  handler: async ({ input, event }) => {
    // The event param gives access to H3Event for headers, cookies, etc.
    const headers = getRequestHeaders(event);
    return `Hello, ${input}!`
  },
});
```

--------------------------------

### Use `useCall` for API Client in Vue Components

Source: https://github.com/andresberrios/nuxt-procedures/blob/main/README.md

Demonstrates calling a procedure ('hello') from a Vue component using the generated `apiClient.hello.useCall` method. This method is a wrapper around `useFetch` and is suitable for fetching data during component rendering.

```vue
<script setup lang="ts">
const { data: greeting, pending } = await apiClient.hello.useCall("World");
</script>

<template>
  <p v-if="pending">Loading...</p>
  <p v-else>{{ greeting }}</p>
</template>
```

--------------------------------

### Define Complex Procedure with Zod Objects

Source: https://github.com/andresberrios/nuxt-procedures/blob/main/README.md

Defines a complex procedure 'users/create' using Zod objects for input and output validation. It demonstrates accessing Nuxt event context and using a hypothetical `useDB` utility.

```typescript
import { z } from "zod";

export default defineProcedure({
  input: z.object({
    name: z.string(),
    email: z.string().email(),
    role: z.enum(["admin", "user"]).default("user"),
  }),
  output: z.object({
    id: z.string(),
    name: z.string(),
    email: z.string(),
  }),
  handler: async ({ input, event }) => {
    const headers = getRequestHeaders(event);
    console.log(headers);

    const db = await useDB(event);
    const newUser = await db.user.create({
      data: input,
    });

    return newUser;
  },
});
```

--------------------------------

### Call Nuxt Procedures API Client in Vue Component

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Demonstrates how to call server-side procedures directly from a Vue component using the generated `apiClient`. It covers calling simple and complex procedures, including nested ones, and shows how to handle potential validation errors.

```typescript
// In a Vue component script
async function handleSubmit() {
  try {
    // Simple procedure call with string input
    const greeting = await apiClient.hello.call("World");
    console.log(greeting); // "Hello, World!"

    // Complex procedure call with object input
    const newUser = await apiClient.users.create.call({
      name: "John Doe",
      email: "john@example.com",
      age: 30,
      role: "user",
      metadata: {
        registrationSource: "web",
        referralCode: "REF123",
      },
    });

    console.log(newUser);
    // {
    //   id: "550e8400-e29b-41d4-a716-446655440000",
    //   name: "John Doe",
    //   email: "john@example.com",
    //   role: "user",
    //   createdAt: Date object
    // }

    // Nested procedure calls (mirrors folder structure)
    const result = await apiClient.foo.bar.call("input data");

  } catch (error) {
    // Validation errors throw with detailed Zod error messages
    if (error.statusCode === 400) {
      console.error("Validation failed:", error.data);
    }
  }
}
```

--------------------------------

### Define Server Procedure with Complex Zod Schemas in Nuxt

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Defines a server-side procedure using complex Zod object schemas for input and output, supporting nested objects, enums, optional fields, and defaults. This is useful for handling form submissions and database operations. The handler function receives validated input and can access the database via the event context.

```typescript
// server/procedures/users/create.ts
import { z } from "zod";

export default defineProcedure({
  input: z.object({
    name: z.string().min(2).max(50),
    email: z.string().email(),
    age: z.number().int().positive().optional(),
    role: z.enum(["admin", "user", "moderator"])
      .default("user"),
    metadata: z.object({
      registrationSource: z.string(),
      referralCode: z.string().optional(),
    }),
  }),
  output: z.object({
    id: z.string().uuid(),
    name: z.string(),
    email: z.string(),
    role: z.enum(["admin", "user", "moderator"]),
    createdAt: z.date(),
  }),
  handler: async ({ input, event }) => {
    // Access database through event context
    const db = await useDB(event);

    // Input is fully typed and validated
    const newUser = await db.user.create({
      data: {
        name: input.name,
        email: input.email,
        age: input.age,
        role: input.role,
      },
    });

    // Return value is validated against output schema
    return {
      id: newUser.id,
      name: newUser.name,
      email: newUser.email,
      role: newUser.role,
      createdAt: newUser.createdAt,
    };
  },
});
```

--------------------------------

### Handle Complex Data Types with SuperJSON Serialization in TypeScript

Source: https://context7.com/andresberrios/nuxt-procedures/llms.txt

Demonstrates how Nuxt Procedures automatically serializes and deserializes complex data types like Date, Set, and Map using SuperJSON. This eliminates the need for manual conversion between client and server, ensuring type safety and seamless data handling.

```typescript
// server/procedures/complexData.ts
import { z } from "zod";

export default defineProcedure({
  input: z.object({
    date: z.date(),
    tags: z.set(z.string()),
    preferences: z.map(z.string(), z.any()),
  }),
  output: z.object({
    processedAt: z.date(),
    tagCount: z.number(),
    settings: z.map(z.string(), z.any()),
  }),
  handler: async ({ input }) => {
    return {
      processedAt: new Date(),
      tagCount: input.tags.size,
      settings: new Map([
        ["theme", "dark"],
        ["notifications", true],
      ]),
    };
  },
});

// Client usage - complex types work seamlessly
const result = await apiClient.complexData.call({
  date: new Date("2025-01-15"),
  tags: new Set(["typescript", "nuxt", "vue"]),
  preferences: new Map([["language", "en"], ["timezone", "UTC"]]),
});

console.log(result.processedAt instanceof Date); // true
console.log(result.settings instanceof Map); // true

```

--------------------------------

### Use `call` for Direct API Calls

Source: https://github.com/andresberrios/nuxt-procedures/blob/main/README.md

Illustrates using the `apiClient.procedureName.call` method for direct API calls without state management by Nuxt. This is useful for actions triggered by user events like form submissions.

```typescript
// Calling the simple procedure
const greeting = await apiClient.hello.call("World");
// greeting is "Hello, World!"

// Calling the complex procedure
const newUser = await apiClient.users.create.call({
  name: "Andres",
  email: "andres@example.com",
});
// newUser is { id: '...', name: 'Andres', email: 'andres@example.com' }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.