# Vue SDK

> Integrate Orshot Embed into your Vue 3 applications

- **URL**: https://orshot.com/docs/orshot-embed/vue-sdk

---

The Vue SDK provides a wrapper component for Vue 3 to easily integrate Orshot Embed into your application.

## Installation```bash
npm install @orshot/embed-vue
# or
pnpm add @orshot/embed-vue
# or
yarn add @orshot/embed-vue
```## Usage

Import the component and usage is similar to any standard Vue component.```vue
<script setup>
import { ref } from "vue";
import { OrshotEmbed } from "@orshot/embed-vue";

const embedRef = ref(null);

const handleCreate = (data) => {
  console.log("Template created", data);
};
</script>

<template>
  <div style="height: 700px">
    <OrshotEmbed
      ref="embedRef"
      embed-id="YOUR_EMBED_ID"
      template-id="TEMPLATE_ID"
      :modifications="{ name: 'John Doe' }"
      @template:create="handleCreate"
      @error="(err) => console.error(err)"
    />
  </div>
</template>
```## Props

| Prop            | Type                 | Description                             |
| :-------------- | :------------------- | :-------------------------------------- |
| `embed-id`      | `string`             | Your Embed configuration ID.            |
| `template-id`   | `string` \| `number` | ID of the template to load initially.   |
| `modifications` | `object`             | Initial data to populate the template.  |
| `width`         | `string` \| `number` | Width of the iframe (default: `100%`).  |
| `height`        | `string` \| `number` | Height of the iframe (default: `100%`). |
| `url`           | `string`             | Optional custom instance URL.           |

## Events

The component emits standard Orshot events:

- `@template:create`
- `@template:update`
- `@template:content`
- `@download:png`
- `@download:pdf`
- `@error`

See the [Events documentation](https://orshot.com/docs/orshot-embed/events) for payload details.

## Methods

You can access methods via the component ref:```js
// Change template
embedRef.value.setTemplate("new-id");

// Update data
embedRef.value.setModifications({ title: "New Title" });

// Request export
embedRef.value.requestContent("png", { scale: 2 });
```## Source

[View on GitHub](https://github.com/rishimohan/orshot-embed-sdk/tree/main/packages/vue)