> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/workflow/llms.txt
> Use this file to discover all available pages before exploring further.

# Nuxt

> Install and configure Workflow DevKit in your Nuxt application

This guide shows you how to install Workflow DevKit in a Nuxt project.

<Steps>
  <Step title="Install dependencies">
    Install the `workflow` package:

    <CodeGroup>
      ```bash npm theme={null}
      npm install workflow
      ```

      ```bash yarn theme={null}
      yarn add workflow
      ```

      ```bash pnpm theme={null}
      pnpm add workflow
      ```
    </CodeGroup>
  </Step>

  <Step title="Configure Nuxt">
    Add the Workflow module to your Nuxt config:

    ```typescript nuxt.config.ts theme={null}
    import { defineNuxtConfig } from 'nuxt/config';

    export default defineNuxtConfig({
      modules: ['workflow/nuxt'],
      compatibilityDate: 'latest',
    });
    ```

    The Nuxt module automatically:

    * Registers the `@workflow/nitro` module
    * Enables the TypeScript plugin by default
    * Configures Nitro for workflow execution

    ### Configuration Options

    You can configure the TypeScript plugin:

    ```typescript nuxt.config.ts theme={null}
    export default defineNuxtConfig({
      modules: ['workflow/nuxt'],
      workflow: {
        typescriptPlugin: false,  // Disable if needed
      },
      compatibilityDate: 'latest',
    });
    ```
  </Step>
</Steps>

## How it works

The Nuxt integration:

* Wraps the Nitro integration for seamless Nuxt compatibility
* Uses Nuxt's module system to configure Nitro automatically
* Enables TypeScript IntelliSense by default
* Works with both Nuxt 3 and Nuxt 4
* Inherits all Nitro workflow capabilities

## Example workflow

```typescript server/workflows/user-onboarding.ts theme={null}
import { sleep } from "workflow";

export async function onboardUser(userId: string) {
  "use workflow";

  const user = await createUserProfile(userId);
  await sendWelcomeEmail(user);
  await sleep("3 days");
  await sendOnboardingTips(user);

  return { userId: user.id, status: "onboarded" };
}

async function createUserProfile(userId: string) {
  "use step";
  console.log(`Creating profile for user ${userId}`);
  return { id: userId, email: `user-${userId}@example.com` };
}

async function sendWelcomeEmail(user: { id: string; email: string }) {
  "use step";
  console.log(`Sending welcome email to ${user.email}`);
}

async function sendOnboardingTips(user: { id: string; email: string }) {
  "use step";
  console.log(`Sending onboarding tips to ${user.email}`);
}
```

## Triggering workflows

Start workflows from API routes:

```typescript server/api/onboard.post.ts theme={null}
import { start } from 'workflow/api';
import { defineEventHandler, readBody } from 'h3';
import { onboardUser } from '../workflows/user-onboarding';

export default defineEventHandler(async (event) => {
  const { userId } = await readBody(event);
  await start(onboardUser, [userId]);
  return { message: "Onboarding workflow started" };
});
```

## Development

Run the development server:

```bash theme={null}
npm run dev
```

Trigger a workflow:

```bash theme={null}
curl -X POST --json '{"userId":"123"}' http://localhost:3000/api/onboard
```

## Production

Build for production:

```bash theme={null}
npm run build
```

When deploying to Vercel, the Workflow module automatically configures the necessary infrastructure.

## TypeScript IntelliSense

The TypeScript plugin is enabled by default and provides:

* Type checking for workflow and step functions
* Auto-completion for workflow APIs
* Error detection for invalid workflow patterns

To manually configure it in `tsconfig.json`:

```json tsconfig.json theme={null}
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "workflow"
      }
    ]
  }
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Core Concepts" href="/concepts/workflows-and-steps">
    Learn about workflows and steps
  </Card>

  <Card title="API Reference" href="/api-reference/integrations/nuxt">
    View the full Nuxt API reference
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.