vue-cropper

A browser-based, non-destructive image editor — crop, brightness, contrast, saturation and filters — built with Vue 3, Vuetify and Pinia. The original image is never mutated: every preview is derived from it, and edits can be exported/re-imported as JSON operations that replay onto the original.

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsgo for type checking (this project pins typescript@~7.0.2, which the standard vue-tsc is incompatible with). In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

Tests live under tests/, mirroring the src/ layout.

npm run test:unit    # watch mode, for local development
npm run test         # single run, also invoked as part of `npm run build`

Lint with oxlint

npm run lint

Format with Prettier

npm run format