SDK/FRAMEWORKS
Vue 3
Use @edithpro/vue: install it as a plugin, or wrap part of your app in a provider.
Option A: plugin #
main.ts
// main.tsimport { createApp } from 'vue';import { EdithProPlugin } from '@edithpro/vue';import App from './App.vue'; createApp(App) .use(EdithProPlugin, { clientId: 'ep_live_abc123', workspaceId: 'ws_64f2a1b3' }) .mount('#app');
Option B: provider component #
RecorderArea.vue
<script setup lang="ts">import { EdithProProvider, EdithProButton } from '@edithpro/vue';</script> <template> <EdithProProvider client-id="ep_live_abc123" workspace-id="ws_64f2a1b3" theme="dark"> <EdithProButton class="btn">Record a video</EdithProButton> </EdithProProvider></template>
The composable #
RecordingStatus.vue
<script setup lang="ts">import { useEdithPro } from '@edithpro/vue';const { isRecording, isPaused, duration, pause, resume, stop } = useEdithPro();</script> <template> <div v-if="isRecording"> {{ isPaused ? 'Paused' : 'Recording' }} · {{ duration }}s <button @click="isPaused ? resume() : pause()">{{ isPaused ? 'Resume' : 'Pause' }}</button> <button @click="stop()">Stop</button> </div></template>
State values are Vue refs, so templates update by themselves.
Call useEdithPro() after app.use(EdithProPlugin) or inside <EdithProProvider>.
Was this page helpful? @edithpro/sdk 1.0.5 · Edit this page