Vue examples

Choose an example

Run a command

Render this component inside PptxEditorRoot. It adds a slide with the typed addSlide command and shows the engine's refusal reason:

<script setup lang="ts">
import { ref } from 'vue';
import { useEditorState, usePptxEditor } from '@pptx-editor.dev/vue';

const editor = usePptxEditor();
const editable = useEditorState((s) => s.status === 'ready' && s.mode === 'edit');
const error = ref<string | null>(null);

function add() {
  if (!editor.value) return;
  const result = editor.value.exec({ type: 'addSlide' });
  error.value = result.ok ? null : result.reason;
}
</script>

<template>
  <button type="button" :disabled="!editable" @click="add">New slide</button>
  <output aria-live="polite">{{ error }}</output>
</template>

exec returns a CommandResult: ok is false with a reason when the engine refuses the command. Commands that change the presentation normally create an undo step. No-op commands add none; history groups and consecutive nudges can combine edits. See Undo and history groups. For a control that a toolbar slot already describes, prefer useEditorCommand(slot); see Vue composables.

Run the Vue example

The examples/vue app is the twin of the React example. It shows composed chrome: a menu bar, the toolbar or the ribbon, the slide rail and the Slide Sorter, the notes, the side panel, and export. It builds against the package source, so it needs no build step. From the repository root, run bun install, then:

bun run dev:vue   # http://localhost:5275

To run the React and Vue examples side by side, run bun run dev:all.

Limits

• Render command components inside PptxEditorRoot. Read the editor through editor.value, and wait for it before you call it.
• save() returns null when no deck is open. Your application owns any download or upload of the saved bytes.
• The editor makes no network request of its own. Your application fetches the deck and passes its bytes.

Next steps

• Vue props: configure <PptxEditor> and its ref.
• Toolbar: find command slot identifiers.
• Vite with Vue: set up a Vue application.