filerobot-image-editor-vue3

filerobot-image-editor-vue3

A Vue 3 wrapper component for the Filerobot Image Editor — a powerful, browser-based image editor with cropping, resizing, annotation, finetune, filters, and watermark tools.

Installation

npm install filerobot-image-editor-vue3

Basic Usage

Wrap the component in a sized container. The editor fills 100% of its parent's height and width.

<script lang="ts" setup>
import { FilerobotImageEditorVue3, TABS, TOOLS } from 'filerobot-image-editor-vue3'
import type { IFilerobotImageEditorConfig } from 'filerobot-image-editor-vue3'

const editorConfig: IFilerobotImageEditorConfig = {
  source: 'https://example.com/image.jpg',
  tabsIds: [TABS.ADJUST, TABS.FINETUNE, TABS.ANNOTATE, TABS.FILTERS],
  defaultTabId: TABS.ADJUST,
  language: 'en',
  onSave: (savedImageData) => {
    console.log(savedImageData.imageBase64)
  },
}
</script>

<template>
  <!-- The editor fills its parent — give the parent an explicit height -->
  <div style="height: 600px; width: 100%;">
    <FilerobotImageEditorVue3 :config="editorConfig" />
  </div>
</template>

Important: The editor stretches to fill 100% of its parent's height. Always give the parent container an explicit height (e.g. height: 600px or height: 100vh). Without this the editor will collapse.

Props

Exposed

Configuration Reference

Core

Tabs & Tools

Saving

Lifecycle Callbacks

General Editor Settings

UI Visibility — Top Bar Buttons

Custom Extension: Sidebar Undo Tab

Crop Options

Crop?: {
  ratio?: 'original' | 'custom' | 'ellipse' | number
  noPresets?: boolean
  noRotate?: boolean
  noFlipX?: boolean
  noFlipY?: boolean
  withResize?: boolean
  minWidth?: number
  minHeight?: number
  maxWidth?: number
  maxHeight?: number
  autoResize?: boolean
  lockCropAreaAt?: 'top-left' | 'top-center' | ... // 9 positions
  presetsItems?: CropPresetItem[]
  presetsFolders?: CropPresetFolder[]
}

Finetune Options

All are boolean. Setting to true hides that control.

Filters

Pass an allow-list of filter names to restrict what the user sees:

Filters: ['Original', 'Black & White', 'Sepia', 'Solarize', 'Invert']

Annotation Tools

All annotation types extend AnnotationsCommon:

Text — Additional Options

Watermark Options

Localization

Example — override a tab label:

translations: {
  adjustTab: 'Crop & Adjust',
  resizeTab: 'Image Size',
}

Cloudimage Integration

Layout Requirements

The component renders to 100% of its parent's size. You must give the parent an explicit height:

<!-- ✅ Correct -->
<div style="height: 100vh;">
  <FilerobotImageEditorVue3 :config="config" />
</div>

<!-- ❌ Will collapse — no height defined -->
<div>
  <FilerobotImageEditorVue3 :config="config" />
</div>

Full Example

<script lang="ts" setup>
import { ref } from 'vue'
import { FilerobotImageEditorVue3, TABS, TOOLS } from 'filerobot-image-editor-vue3'
import type { IFilerobotImageEditorConfig } from 'filerobot-image-editor-vue3'

const editorRef = ref(null)

const config: IFilerobotImageEditorConfig = {
  source: 'https://example.com/photo.jpg',

  tabsIds: [TABS.ADJUST, TABS.FINETUNE, TABS.FILTERS, TABS.ANNOTATE],
  defaultTabId: TABS.ADJUST,

  Crop: {
    ratio: 'custom',
    noRotate: true,
    noFlipX: true,
    noFlipY: true,
    withResize: true,   // Embeds Resize inside the Crop tab
  },

  Finetune: {
    noBrightness: false,
    noBlur: true,
    noNoise: true,
    noPosterize: true,
    noPixelate: true,
    noThreshold: true,
  },

  Filters: ['Original', 'Black & White', 'Sepia'],

  Text: {
    noFontFamily: true,
    noBold: true,
    noItalic: true,
    text: 'Add text...',
  },

  language: 'en',
  withUndoButtonAsTab: true,  // Adds Undo to the sidebar
  noUndoButton: true,
  noRedoButton: true,
  noResetButton: true,

  showSaveButton: false,
  disableSaveIfNoChanges: true,
  avoidChangesNotSavedAlertOnLeave: true,

  onSave: (data) => {
    console.log('Saved:', data.fullName, data.imageBase64)
  },
}
</script>

<template>
  <div style="height: 100vh; width: 100%;">
    <FilerobotImageEditorVue3 ref="editorRef" :config="config" />
  </div>
</template>

Development

npm install       # Install dependencies
npm run dev       # Start dev server with hot-reload
npm run build     # Build the library bundle
npm run lint      # Lint source files

License

MIT — see LICENSE for details.