> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Mount Embed Editor from a Vue component with the standalone entry.

Mount the editor from a Vue component with the standalone entry.

> [!TIP]
>
> Try every prop live in the [playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6IlZVRSJ9), open on Vue, and copy the code it writes.

> [tab] Free
>
> Free is on public npm, with no key. It has the Adjust tools, and a small "embededitor.com" badge in the corner of the menu.
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/free
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/free
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/free
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/free
> ```
>
> ## Render
>
> ```vue PhotoEditor.vue theme={"dark"}
> <script setup lang="ts">
> import { mountEditor } from '@embededitor/free/standalone';
> import type { Lang } from '@embededitor/free/standalone';
> import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
>
> const props = withDefaults(defineProps<{ lang?: Lang; src: string }>(), { lang: 'en-us' });
> const host = ref<HTMLElement | null>(null);
> let editor: ReturnType<typeof mountEditor> | null = null;
>
> const options = () => ({ lang: props.lang, src: props.src });
>
> onMounted(() => {
>   if (host.value) {
>     editor = mountEditor(host.value, options());
>   }
> });
>
> watch(() => props.lang, () => {
>   editor?.update(options());
> });
>
> onBeforeUnmount(() => {
>   editor?.destroy();
> });
> </script>
>
> <template>
>   <div ref="host" style="height: 600px"></div>
> </template>
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> `update(options)` takes the full options again, not a patch. The `watch` above sends them whenever `lang` changes.
>
> `src` and `state` are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.
>
> ## Clean Up
>
> Call `destroy()` in `onBeforeUnmount`, as above. Calling `update` after `destroy` throws.

> [tab] Lite
>
> Lite has the Adjust tools, without the badge. It installs from the private registry, with the key of your license.
>
> ## Set Up the Registry
>
> Your license key is on its card in your account at `account.embededitor.com`. [Buy a plan](https://embededitor.com/pricing) to get one.
>
> Point the `@embededitor` scope at the registry, and keep the key in an environment variable named `EMBED_EDITOR_KEY`, out of git.
>
> For npm, pnpm, bun and Yarn 1, add this to the `.npmrc` of your project:
>
> ```ini .npmrc theme={"dark"}
> @embededitor:registry=https://get.embededitor.com/
> //get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
> ```
>
> Yarn 2 and newer ignore `.npmrc`. Add this to `.yarnrc.yml` instead:
>
> ```yaml .yarnrc.yml theme={"dark"}
> npmScopes:
>   embededitor:
>     npmRegistryServer: "https://get.embededitor.com"
>     npmAuthToken: "${EMBED_EDITOR_KEY}"
> ```
>
> Set the key where your install runs, your shell or your CI's secrets, never in git:
>
> ```bash Terminal theme={"dark"}
> export EMBED_EDITOR_KEY=<your-key>
> ```
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/lite
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/lite
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/lite
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/lite
> ```
>
> ## Render
>
> ```vue PhotoEditor.vue theme={"dark"}
> <script setup lang="ts">
> import { mountEditor } from '@embededitor/lite/standalone';
> import type { Lang } from '@embededitor/lite/standalone';
> import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
>
> const props = withDefaults(defineProps<{ lang?: Lang; src: string }>(), { lang: 'en-us' });
> const host = ref<HTMLElement | null>(null);
> let editor: ReturnType<typeof mountEditor> | null = null;
>
> const options = () => ({ lang: props.lang, src: props.src });
>
> onMounted(() => {
>   if (host.value) {
>     editor = mountEditor(host.value, options());
>   }
> });
>
> watch(() => props.lang, () => {
>   editor?.update(options());
> });
>
> onBeforeUnmount(() => {
>   editor?.destroy();
> });
> </script>
>
> <template>
>   <div ref="host" style="height: 600px"></div>
> </template>
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> `update(options)` takes the full options again, not a patch. The `watch` above sends them whenever `lang` changes.
>
> `src` and `state` are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.
>
> ## Clean Up
>
> Call `destroy()` in `onBeforeUnmount`, as above. Calling `update` after `destroy` throws.

> [tab] Full
>
> Full has every tool, without the badge. It installs from the private registry, with the key of your license.
>
> ## Set Up the Registry
>
> Your license key is on its card in your account at `account.embededitor.com`. [Buy a plan](https://embededitor.com/pricing) to get one.
>
> Point the `@embededitor` scope at the registry, and keep the key in an environment variable named `EMBED_EDITOR_KEY`, out of git.
>
> For npm, pnpm, bun and Yarn 1, add this to the `.npmrc` of your project:
>
> ```ini .npmrc theme={"dark"}
> @embededitor:registry=https://get.embededitor.com/
> //get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
> ```
>
> Yarn 2 and newer ignore `.npmrc`. Add this to `.yarnrc.yml` instead:
>
> ```yaml .yarnrc.yml theme={"dark"}
> npmScopes:
>   embededitor:
>     npmRegistryServer: "https://get.embededitor.com"
>     npmAuthToken: "${EMBED_EDITOR_KEY}"
> ```
>
> Set the key where your install runs, your shell or your CI's secrets, never in git:
>
> ```bash Terminal theme={"dark"}
> export EMBED_EDITOR_KEY=<your-key>
> ```
>
> ## Install
>
> ```bash npm theme={"dark"}
> npm install @embededitor/full
> ```
>
> ```bash yarn theme={"dark"}
> yarn add @embededitor/full
> ```
>
> ```bash pnpm theme={"dark"}
> pnpm add @embededitor/full
> ```
>
> ```bash bun theme={"dark"}
> bun add @embededitor/full
> ```
>
> ## Render
>
> ```vue PhotoEditor.vue theme={"dark"}
> <script setup lang="ts">
> import { mountEditor } from '@embededitor/full/standalone';
> import type { Lang } from '@embededitor/full/standalone';
> import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
>
> const props = withDefaults(defineProps<{ lang?: Lang; src: string }>(), { lang: 'en-us' });
> const host = ref<HTMLElement | null>(null);
> let editor: ReturnType<typeof mountEditor> | null = null;
>
> const options = () => ({ lang: props.lang, src: props.src });
>
> onMounted(() => {
>   if (host.value) {
>     editor = mountEditor(host.value, options());
>   }
> });
>
> watch(() => props.lang, () => {
>   editor?.update(options());
> });
>
> onBeforeUnmount(() => {
>   editor?.destroy();
> });
> </script>
>
> <template>
>   <div ref="host" style="height: 600px"></div>
> </template>
> ```
>
> Give the host element a height: the editor fills it.
>
> ## Update Props
>
> `update(options)` takes the full options again, not a patch. The `watch` above sends them whenever `lang` changes.
>
> `src` and `state` are read when the editor opens. Once an image is on screen, destroy the editor and mount it again to open another one.
>
> ## Clean Up
>
> Call `destroy()` in `onBeforeUnmount`, as above. Calling `update` after `destroy` throws.

## Next Steps

> [card] [Props](https://docs.embededitor.com/api-reference/props.md)
>
> Every option the editor takes.

> [card] [mountEditor](https://docs.embededitor.com/api-reference/mount-editor.md)
>
> The full signature.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.