@lupinum/nuxt-board

Nuxt module with auto-imported board components and composables.

Install

Requires Nuxt 3.19 or newer, or Nuxt 4.

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

Add the module to nuxt.config.ts:

nuxt.config.ts

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

Module options

Configure via the board key in nuxt.config.ts:

Name	Type	Default	Description
`prefix`	`string`	`''`	Optional prefix for all auto-imported exports. Example: `'My'` produces `<MyBoardRoot>`, `useMyBoardCamera()`, and `createMyBoardEngine()`.
`autoImportComponents`	`boolean`	`true`	Make board components available through Nuxt's component auto-imports.
`autoImportComposables`	`boolean`	`true`	Make board composables and `createBoardEngine` available through Nuxt auto-imports.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-board'],
  board: {
    prefix: 'My',
    autoImportComponents: true,
    autoImportComposables: true,
  },
})

Auto-imported components

When autoImportComponents is true (default), these components are auto-imported when used:

Component	Source
`BoardRoot`	`@lupinum/vue-board`
`BoardViewport`	`@lupinum/vue-board`
`BoardNode`	`@lupinum/vue-board`
`BoardNodeHandle`	`@lupinum/vue-board`
`BoardSelectionToolbar`	`@lupinum/vue-board`
`BoardGrid`	`@lupinum/vue-board`
`BoardBoxSelect`	`@lupinum/vue-board`
`BoardSnapGuides`	`@lupinum/vue-board`
`BoardMinimap`	`@lupinum/vue-board/minimap`

With a prefix of 'My', they become <MyBoardRoot>, <MyBoardViewport>, etc.

Auto-imported composables

When autoImportComposables is true (default), these are available without imports:

Composable	Source
`useBoardEngine`	`@lupinum/vue-board`
`useBoardCamera`	`@lupinum/vue-board`
`useBoardNodes`	`@lupinum/vue-board`
`useBoardSelection`	`@lupinum/vue-board`
`useBoardInteraction`	`@lupinum/vue-board`
`useBoardVisibleBounds`	`@lupinum/vue-board`
`useBoardVisibleNodes`	`@lupinum/vue-board`
`useBoardGridStyle`	`@lupinum/vue-board`
`useBoardNode`	`@lupinum/vue-board`
`useBoardBoxSelectBounds`	`@lupinum/vue-board`
`useBoardMinimap`	`@lupinum/vue-board/minimap`

With a prefix of 'My', these aliases become useMyBoardEngine(), useMyBoardCamera(), useMyBoardNodes(), and so on.

Auto-imported functions

These helpers are registered with the composable auto-imports. If autoImportComposables is false, import them explicitly.

Function	Source
`createBoardEngine`	`@lupinum/board-core`

With a prefix of 'My', the helper becomes createMyBoardEngine().

Usage

With the Nuxt module installed, you can use board features without any imports:

app.vue

<script setup lang="ts">
import { asNodeId } from '@lupinum/board-core'

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

engine.createNode({
  id: asNodeId('nuxt-hello'),
  type: 'text',
  x: 100,
  y: 100,
  width: 240,
  height: 160,
  text: 'Node',
})
</script>

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