This is a fork of nuxt-excalidraw by Angelo Schuler Piletti.

特性：兼容 Nuxt v4

📌 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 @lionad/nuxt-excalidraw

# Using yarn
yarn add --dev @lionad/nuxt-excalidraw

# Using npm
npm install --save-dev @lionad/nuxt-excalidraw

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

export default defineNuxtConfig({
  modules: [
    '@lionad/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