1---
2category: '@Integrations'
3---
4 
5# useDrauu
6 
7Reactive instance for [drauu](https://github.com/antfu/drauu).
8 
9## Install
10 
11```bash
12npm i drauu@^0
13```
14 
15## Usage
16 
17```vue
18<script setup lang="ts">
19import { toRefs } from '@vueuse/core'
20import { useDrauu } from '@vueuse/integrations/useDrauu'
21import { useTemplateRef } from 'vue'
22 
23const target = useTemplateRef('target')
24const { undo, redo, canUndo, canRedo, brush } = useDrauu(target)
25const { color, size } = toRefs(brush)
26</script>
27 
28<template>
29  <svg ref="target" />
30</template>
31```
32 
33## Type Declarations
34 
35```ts
36export type UseDrauuOptions = Omit<Options, "el">
37export interface UseDrauuReturn {
38  drauuInstance: Ref<Drauu | undefined>
39  load: (svg: string) => void
40  dump: () => string | undefined
41  clear: () => void
42  cancel: () => void
43  undo: () => boolean | undefined
44  redo: () => boolean | undefined
45  canUndo: ShallowRef<boolean>
46  canRedo: ShallowRef<boolean>
47  brush: Ref<Brush>
48  onChanged: EventHookOn
49  onCommitted: EventHookOn
50  onStart: EventHookOn
51  onEnd: EventHookOn
52  onCanceled: EventHookOn
53}
54/**
55 * Reactive drauu
56 *
57 * @see https://vueuse.org/useDrauu
58 * @param target The target svg element
59 * @param options Drauu Options
60 */
61export declare function useDrauu(
62  target: MaybeComputedElementRef,
63  options?: UseDrauuOptions,
64): UseDrauuReturn
65```
66