@lupinum/vue-board

Build node editors and visual planning tools with one headless engine and native Vue components.

[!WARNING] Nuxt Board is pre-1.0. Review the changelog before each upgrade.

Why use Nuxt Board?

Nuxt Board separates board behavior from Vue rendering. The engine owns state, commands, validation, and events. Vue renders the current model and converts pointer input into board actions.

This design gives you predictable state outside the component tree. You can add your own node content without replacing selection, drag, resize, pan, zoom, or keyboard behavior.

Agent setup

Every Nuxt Board package ships its documentation for coding agents such as Claude Code, Codex and Cursor. The pages match the installed version. Give your coding agent this task:

Set up @lupinum/nuxt-board for coding agents as described under "Agent setup" in its README.

Use the package you installed in place of @lupinum/nuxt-board, for example @lupinum/vue-board in a Vue project. The steps are in each package README.

When to use it

Use Nuxt Board for workflow builders, visual planning tools, graph canvases, whiteboard surfaces, and JSON Canvas document views.

Do not use it when you only need a static diagram. It is also not a complete low-code product or drawing application. Your application must provide its own domain rules and backend behavior.

Requirements

• Node.js 20.19 or newer.
• Vue 3.5 or newer.
• Nuxt 3.19 or newer when you use @lupinum/nuxt-board.

Installation

Install the core engine and Vue renderer:

pnpm add @lupinum/board-core @lupinum/vue-board

Add the Nuxt module when you use Nuxt:

pnpm add @lupinum/nuxt-board @lupinum/board-core @lupinum/vue-board

Quick start

Create an engine and pass it to BoardRoot:

<script setup lang="ts">
import { createBoardEngine } from '@lupinum/board-core'
import { BoardRoot } from '@lupinum/vue-board'
import '@lupinum/vue-board/style.css'

const engine = createBoardEngine({ grid: { size: 20, snap: true } })

engine.createNode({
  type: 'text',
  x: 80,
  y: 80,
  width: 260,
  height: 140,
  text: 'Drag and resize me.',
})
</script>

<template>
  <BoardRoot :engine="engine" style="height: 100vh" />
</template>

Register the module in Nuxt:

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-board'],
})

Discord

Join the Lupinum OSS community to discuss Nuxt Board, ask questions, and share what you build.

How it works

createBoardEngine() creates the source of truth. Change the board through commands such as createNode, updateNode, select, zoomToFit, and loadDocument.

BoardRoot subscribes to the engine. It renders the viewport, grid, nodes, handles, selection tools, snap guides, and pointer interaction.

Keep the engine out of Vue deep reactivity. Use shallowRef if you store it in Vue state. Load new board content through engine commands instead of replacing a mounted engine.

Main capabilities

• Drag, resize, select, group, pan, zoom, and snap nodes.
• Use command guards, events, validation, and atomic batches.
• Render custom Vue components for domain-specific node content.
• Import and export JSON Canvas documents.
• Add undo, redo, connections, labels, routing, and a minimap.
• Render deterministic initial boards during Nuxt SSR.

Packages

Documentation

Read the Nuxt Board documentation. Start with why Nuxt Board and your first board.

Contributing and development

Read CONTRIBUTING.md before you open a pull request. Run the normal handoff gate before you submit a change:

corepack enable
pnpm install
pnpm verify

Releases go through Changesets and the protected release.yml workflow. AGENTS.md lists the commands and rules.

Support and security

Open a GitHub issue for bugs and focused proposals. Join the Lupinum OSS Discord for project discussion.

Use the private process in SECURITY.md to report a vulnerability. Do not report a vulnerability in a public issue.

License

Nuxt Board is available under the MIT License. Copyright belongs to Lupinum OG.