Skip to main content
This guide shows you how to install Workflow DevKit in a Nuxt project.
1

Install dependencies

Install the workflow package:
npm install workflow
2

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"
      }
    ]
  }
}

​
Next steps

Core Concepts

Learn about workflows and steps

API Reference

View the full Nuxt API reference

Build docs developers (and LLMs) love

Get started for freeTalk to us