Nuxt Excalidraw

Add the amazing Excalidraw on your Nuxt 3 project.

See Excalidraw demo

Features

You can use following APIs:

• Props
• Children Components
• Utils
• Constants
• Creating Elements programmatically

Feel free to contribute and get in touch.

Quick Setup

Add nuxt-excalidraw dependency to your project

# Using pnpm
pnpm add -D nuxt-excalidraw

# Using yarn
yarn add --dev nuxt-excalidraw

# Using npm
npm install --save-dev nuxt-excalidraw

Add nuxt-excalidraw to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-excalidraw',
    // other modules
  ]
})

No configuration is necessary

Usage

The module injects a component called ExcalidrawBoard in your NuxtApp.

The basicest use of it is:

<script setup lang="ts">
</script>

<template>
  <div>
    <ClientOnly>
      <ExcalidrawBoard />
    </ClientOnly>
  </div>
</template>

It is important that you load the component once browser APIs are available.

Using Props

If you want to use, for example, Excalidraw props initialData and onChange, you can do it as following:

<script setup lang="ts">
import type { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
import type { AppState, BinaryFiles } from '@excalidraw/excalidraw/types/types'

function myCallback(
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
) {
  // Do something cool here...
}

const initialDataFromMyService = useMyService().data
</script>

<template>
  <div>
    <ClientOnly>
      <ExcalidrawBoard
        :on-change="myCallback"
        :initial-data="initialDataFromMyService"
      />
    </ClientOnly>
  </div>
</template>

• Release Notes
• Contributing