1.0.0-beta.0 ā¢ Published 6 months ago
nuxt-excalidraw v1.0.0-beta.0
š 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>
1.0.0-beta.7
6 months ago
1.0.0-beta.6
6 months ago
1.0.0-beta.5
6 months ago
1.0.0-beta.4
6 months ago
1.0.0-beta.3
6 months ago
1.0.0-beta.2
6 months ago
1.0.0-beta.1
6 months ago
1.0.0-beta.0
6 months ago
0.1.0
6 months ago