Photo Editor

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

Installation

To install the package, run the following command:

npm install photo-editor

Usage

Nuxt Plugin Setup

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

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:

  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