### Install DragonEditor

Source: https://github.com/lovefields/dragoneditor/blob/main/README.md

Instructions for installing the DragonEditor package using npm, yarn, or bun.

```shell
npm i dragon-editor
# or
yarn add dragon-editor
# or
bun add dragon-editor
```

--------------------------------

### Using the DragonEditorViewer Component

Source: https://github.com/lovefields/dragoneditor/blob/main/README.md

Example of how to use the DragonEditorViewer component to display content edited with DragonEditor.

```html
<template>
    <div class="view-area">
        <DragonEditorViewer :content="data" />
    </div>
</template>

<script setup lang="ts">
    const data = ref<DEContentData>([]);
</script>
```

--------------------------------

### Using the DragonEditor Component

Source: https://github.com/lovefields/dragoneditor/blob/main/README.md

Example of how to integrate and use the DragonEditor component in a Nuxt3 application, including data binding.

```html
<template>
    <div class="editor-area">
        <DragonEditor v-model="contentData" />
    </div>
</template>

<script setup lang="ts">
    const contentData = ref<DEContentData>([]); // Do not modify the value after binding under any circumstances.
</script>
```

--------------------------------

### Configure Nuxt3 Module

Source: https://github.com/lovefields/dragoneditor/blob/main/README.md

How to add DragonEditor as a module in your Nuxt3 configuration file.

```typescript
export default defineNuxtConfig({
    modules: ["dragon-editor"],
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.