Vue SDK

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

Installation

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.

<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 for payload details.

Methods

You can access methods via the component ref:

// 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