Nuxt

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

Install dependencies

Install the workflow package:

npm install workflow

yarn add workflow

pnpm add workflow

Configure Nuxt

Add the Workflow module to your Nuxt config:

nuxt.config.ts

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:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['workflow/nuxt'],
  workflow: {
    typescriptPlugin: false,  // Disable if needed
  },
  compatibilityDate: 'latest',
});

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

server/workflows/user-onboarding.ts

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:

server/api/onboard.post.ts

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:

npm run dev

Trigger a workflow:

curl -X POST --json '{"userId":"123"}' http://localhost:3000/api/onboard

Production

Build for production:

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:

tsconfig.json

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "workflow"
      }
    ]
  }
}

Getting Started

Installation

Core Concepts

Building AI Agents

How It Works

Deployment

Observability

Testing

Error Reference

Configuration Options

How it works

Example workflow

Triggering workflows

Development

Production

TypeScript IntelliSense

Next steps

Core Concepts

API Reference

​Configuration Options

​How it works

​Example workflow

​Triggering workflows

​Development

​Production

​TypeScript IntelliSense

​Next steps

Core Concepts

API Reference

Configuration Options

How it works

Example workflow

Triggering workflows

Development

Production

TypeScript IntelliSense

Next steps