@mastershot/vue-editor

Mastershot Editor for Vue

Mastershot's photo and video editor as a Vue 3 component, for Vue and Nuxt. Your visitors crop, turn, trim, pixelate and resize their files on your page, and your code gets the edited file.

npm install @mastershot/editor @mastershot/vue-editor

<script setup>
import { MastershotEditor } from "@mastershot/vue-editor"

defineProps({ file: File })
const emit = defineEmits(["save"])
</script>

<template>
  <MastershotEditor
    :src="file"
    :utils="['crop', 'resize']"
    :image-crop-aspect-ratio="1"
    @process="({ dest }) => emit('save', dest)"
    style="height: 600px"
  />
</template>

Every option of @mastershot/editor is an attribute, in kebab-case or camelCase, and every event is a listener: @process, @load. A template ref's editor is the editor itself. In Nuxt, wrap the component in <ClientOnly>.

License

Free on localhost, private network addresses and .test names, so you can build and try it without an account. A live site needs a license key, and the key works only on the domains you add to it. Without one the editor still works, with a thin "Unlicensed" line above it.

Docs · Try it and set it up