Nuxt Processor

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

Scalable processing for Nuxt

Note: This package is under very active development! Please consider creating issues if you run into anything!

- ✨  Release Notes
- 📖  Documentation

Features

- Dedicated processing: Workers run in a separate Node process – no coupling to your web server.
- Scalability: Run multiple worker processes and instances across machines.
- Simple DX: Define queues/workers using first-class helpers.

Used by

Sections

- Install
- Define a queue and enqueue from your app
- Define a worker
- Running
- CLI
- Bull Board
- Contribution

Install

``bash
npx nuxi@latest module add nuxt-processor@latest
`

Add the module in nuxt.config.ts and set your Redis connection.

`ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-processor'],
processor: {
redis: {
// Prefer a single URL if available (takes precedence over other fields)
// e.g. redis://user:pass@host:6379/0
url: process.env.NUXT_REDIS_URL,
host: process.env.NUXT_REDIS_HOST ?? '127.0.0.1',
port: Number(process.env.NUXT_REDIS_PORT ?? 6379),
password: process.env.NUXT_REDIS_PASSWORD ?? '',
username: process.env.NUXT_REDIS_USERNAME,
db: Number(process.env.NUXT_REDIS_DB ?? 0),
// Optional connection behavior
// Delay connecting until first Redis command (useful to avoid build-time connects)
lazyConnect: process.env.NUXT_REDIS_LAZY_CONNECT
? process.env.NUXT_REDIS_LAZY_CONNECT === 'true'
: undefined,
// Milliseconds to wait before giving up when establishing the connection
connectTimeout: process.env.NUXT_REDIS_CONNECT_TIMEOUT
? Number(process.env.NUXT_REDIS_CONNECT_TIMEOUT)
: undefined,
},
},
})
`

Define a queue and enqueue from your app

Create server/queues/hello.ts:

`ts
import { defineQueue } from '#processor'

type HelloName = 'hello'
type HelloData = { message: string, ts: number }
type HelloResult = { echoed: string, processedAt: number }

export default defineQueue({
name: 'hello',
options: {},
})
`

Define a worker

Create server/workers/hello.ts:

`ts
import { defineWorker } from '#processor'

type HelloName = 'hello'
type HelloData = { message: string, ts: number }
type HelloResult = { echoed: string, processedAt: number }

export default defineWorker({
name: 'hello',
async processor(job) {
return { echoed: job.data.message, processedAt: job.data.ts }
},
options: {},
})
`

Running

- Start your Nuxt app normally. This module generates a dedicated workers entry.
- In development, run workers from .nuxt/dev/workers/index.mjs in a separate terminal:

`bash
nuxi dev
node .nuxt/dev/workers/index.mjs
`

By default all workers run. To run only specific workers, use the --workers= flag with a comma-separated list of worker names:

`bash
node .nuxt/dev/workers/index.mjs --workers=basic,hello
`

$3

A simple CLI is provided to run workers in development (with file watching and restarts).

`bash


from your project root – runs all workers

Notes:
- If .nuxt/dev/workers/index.mjs does not exist yet, the CLI will ask you to start your Nuxt dev server first to generate the entry point for your workers.
- If your package.json does not have a processor:dev script, the CLI will offer to add:

`json
{
"scripts": {
"processor:dev": "nuxt-processor dev"
}
}
`

Then you can run:

`bash
npm run processor:dev
`

- After building for production, run workers from .output/server/workers/index.mjs:

`bash
nuxi build
node .output/server/workers/index.mjs
`

To run only specific workers in production:

`bash
node .output/server/workers/index.mjs --workers=basic,hello
`

Bull Board

Bull Board is an excellent UI for watching your queues, you can follow the setup in the playground to use it.

- Server handler
- Route: playground/server/routes/bull-board.ts
- [Route: playground/server/routes/bull-board/[...].ts](./playground/server/routes/bull-board/%5B...%5D.ts)

Special thanks to @genu for creating the H3 adapter.

For more help getting set up, see this Bull Board H3 adapter comment: .

Contribution

[npm-version-src]: https://img.shields.io/npm/v/nuxt-processor/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-processor

[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-processor.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/nuxt-processor

[license-src]: https://img.shields.io/npm/l/nuxt-processor.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-processor