Vue

The Vue 3 package is a thin wrapper around the same engine. Works with <script setup>, Options API and Nuxt 3.

Install

Terminal

npm install @editpix/vue

Single-file component

components/AvatarEditor.vue

<script setup lang="ts">
import { ref } from "vue";
import { EditpixEditor } from "@editpix/vue";

const props = defineProps<{ userId: string; photo: string }>();
const preview = ref<string | null>(null);

async function handleSave(blob: Blob) {
  const form = new FormData();
  form.append("file", blob, "avatar.png");
  await fetch(`/api/users/${props.userId}/avatar`, {
    method: "POST",
    body: form,
  });
  preview.value = URL.createObjectURL(blob);
}
</script>

<template>
  <EditpixEditor
    :api-key="import.meta.env.VITE_EDITPIX_KEY"
    :image-url="photo"
    :options="{ aspectRatios: ['1:1'], filters: true }"
    @save="handleSave"
    @close="$emit('close')"
  />
  <img v-if="preview" :src="preview" class="mt-4 rounded" />
</template>

Nuxt 3

Editpix touches the canvas API, so mark it client-only in Nuxt to skip SSR.

pages/edit.vue

<template>
  <ClientOnly>
    <EditpixEditor :api-key="$config.public.editpixKey" :image-url="url" @save="onSave" />
  </ClientOnly>
</template>

Events

The Vue component emits save (Blob), close and ready. All three map 1:1 with the React props of the same name.