# Vue Image Editor

Embed Editor has no Vue component; you mount it from one. mountEditor, from the standalone entry, takes a template ref and the options, draws the editor in it and returns update and destroy. Mount it in onMounted, destroy it in onBeforeUnmount, and the rest is a Vue component like any other.

## Add It to Your Vue App

Free is on public npm, with no key. Lite and Full install from the private registry with your license key: put the two lines in your project's .npmrc, keep the key in an environment variable, then install by name.

### Free

```bash
npm install @embededitor/free
```

```vue
<script setup lang="ts">
import { mountEditor } from '@embededitor/free/standalone';
import { onBeforeUnmount, onMounted, ref } from 'vue';

const props = defineProps<{ src: string }>();
const host = ref<HTMLElement | null>(null);
let editor: ReturnType<typeof mountEditor> | null = null;

onMounted(() => {
  if (host.value) {
    editor = mountEditor(host.value, {
      onProcess: ({ dest }) => {
        console.info('saved', dest.name);
      },
      src: props.src
    });
  }
});

onBeforeUnmount(() => {
  editor?.destroy();
});
</script>

<template>
  <div ref="host" style="height: 600px"></div>
</template>
```

### Lite

```ini
@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
```

```bash
npm install @embededitor/lite
```

```vue
<script setup lang="ts">
import { mountEditor } from '@embededitor/lite/standalone';
import { onBeforeUnmount, onMounted, ref } from 'vue';

const props = defineProps<{ src: string }>();
const host = ref<HTMLElement | null>(null);
let editor: ReturnType<typeof mountEditor> | null = null;

onMounted(() => {
  if (host.value) {
    editor = mountEditor(host.value, {
      onProcess: ({ dest }) => {
        console.info('saved', dest.name);
      },
      src: props.src
    });
  }
});

onBeforeUnmount(() => {
  editor?.destroy();
});
</script>

<template>
  <div ref="host" style="height: 600px"></div>
</template>
```

### Full

```ini
@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
```

```bash
npm install @embededitor/full
```

```vue
<script setup lang="ts">
import { mountEditor } from '@embededitor/full/standalone';
import { onBeforeUnmount, onMounted, ref } from 'vue';

const props = defineProps<{ src: string }>();
const host = ref<HTMLElement | null>(null);
let editor: ReturnType<typeof mountEditor> | null = null;

onMounted(() => {
  if (host.value) {
    editor = mountEditor(host.value, {
      onProcess: ({ dest }) => {
        console.info('saved', dest.name);
      },
      src: props.src
    });
  }
});

onBeforeUnmount(() => {
  editor?.destroy();
});
</script>

<template>
  <div ref="host" style="height: 600px"></div>
</template>
```

## The Editor You Just Installed

The Full edition with the embededitor.com badge, running in your browser. Photo by [Nikita Khavkin](https://unsplash.com/photos/tower-bridge-in-london-r63ZAtHlCaA) on Unsplash.

## What Changes in Vue

- Mount in onMounted: Template refs are null until the component mounts, so mountEditor runs in onMounted, on host.value.
- A Watch Sends the Changes: A watch on the props calls editor.update(options). The docs build the options in one function, options(), so the mount and the update send the same shape.
- Destroy on Unmount: destroy() goes in onBeforeUnmount, so the editor leaves with the component.
- Typed Props with a Default: The docs' component takes lang and src through withDefaults(defineProps(...)), with lang defaulting to 'en-us'.

## The Props You Will Use Most

- [src](https://docs.embededitor.com/api-reference/props#source): The photo, read when the editor opens: a URL, a File or Blob, bytes, an img or a canvas.
- [state](https://docs.embededitor.com/api-reference/props#source): The edits the photo opens with: a state saved before. Read at open, like src.
- [lang](https://docs.embededitor.com/api-reference/props#appearance): The one prop the docs' component watches: when it changes, update sends the options again.
- [onProcess](https://docs.embededitor.com/api-reference/props#callbacks): Gets the file Save made and its state: emit them to the parent from here.
- [colors](https://docs.embededitor.com/api-reference/props#appearance): One base color per role, to match the editor to your app's palette.

[Every prop in the docs](https://docs.embededitor.com/api-reference/props)

## Vue Questions

### Is there a Vue component?

No. In Vue you mount the editor with mountEditor from the standalone entry. It takes an element and the options, and returns update and destroy.

### Do I need to install React for a Vue app?

The standalone entry has React inside it. You install the one package and import from its /standalone entry, with no React in your Vue app.

### How do I send new props?

Watch the props you care about and call update(options) when one changes, with the options built again from the props.

### How do I switch the photo a Vue component shows?

Not with update: while a photo is on screen, a new src waits for the next open. Destroy the editor in the watch and call mountEditor again on the same host.

## Set it up for Vue in the playground.

Change the edition, the colors, the tools and the crop, and copy the code for your app.

[Open in the Playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6IlZVRSJ9)