open-index/open-npm huggingface dataset:
npm package: @rondigital/photo-editor
Description: A modular photo editor component for Vue 3 and Nuxt 3
Latest version: 1.0.20

# Photo Editor

A modular photo editor component for Vue 3 and Nuxt 3.

## Installation

To install the package, run the following command:

```bash
npm install photo-editor
```

## Usage

### Nuxt Plugin Setup

Register the components globally in your Nuxt app by adding them as a plugin:

```js
import { Stage, ToolbarMain, PromptInput, PropertyPanel } from '@rondigital/photo-editor'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Stage', Stage)
  nuxtApp.vueApp.component('ToolbarMain', ToolbarMain)
  nuxtApp.vueApp.component('PromptInput', PromptInput)
  nuxtApp.vueApp.component('PropertyPanel', PropertyPanel)
});
```

### Nuxt Config

Ensure that the photo-editor package is transpiled by adding the following to your nuxt.config.ts:

```js
  build: {
    transpile: ['@rondigital/photo-editor']
  }
```


### Nuxt Pages

```
<template>
  <div class="h-[100vh] w-full flex flex-col">
    <ToolbarMain />
    <div class="editor-main flex flex-grow">
      <PropertyPanel />
      <Stage />
    </div>
    <PromptInput />
  </div>
</template>
```


### Props

Stage:
  -width: 800
  -height: 600