Excalidraw on Nuxt

reactExacalidraw.js

// plugins/reactExacalidraw.js
import { createElement } from 'react'
import { createRoot } from 'react-dom/client'
import { Excalidraw } from '@excalidraw/excalidraw'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.provide('excalidraw', { createElement, createRoot, Excalidraw })
})


// component.vue or page.vue
<template>
    <ClientOnly>
        <div ref="reactRef"></div>
    </ClientOnly>
</template>

<script setup>
const reactRef = ref(null)

const mountExcalidraw = () => {
    const { $excalidraw } = useNuxtApp()
    if ($excalidraw) {
        const { createElement, createRoot, Excalidraw } = $excalidraw
        requestAnimationFrame(() => {
            const el = reactRef.value
            const root = createRoot(el)
            root.render(createElement(Excalidraw, {
                // example callback
                onChange: (elements, appState, files) => onChangeHandler(elements, appState, files)
            }, null))
        })
    }
}

const onChangeHandler = (elements, appState, files) => {
    console.log('appState: ', appState)
}

onMounted(async () => {
    mountExcalidraw()
})
</script>