Vite with Vue

Install

In your existing Vue application, install the adapter and its engine peer:

npm install @pptx-editor.dev/vue @pptx-editor.dev/core

Mount the editor

Vite renders on the client, so you do not need a server-rendering boundary. Import the stylesheet in the entry and mount the app:

// src/main.ts
import { createApp } from 'vue';
import '@pptx-editor.dev/vue/styles.css';
import App from './App.vue';

createApp(App).mount('#app');

Render the editor in a container with a height:

<!-- src/App.vue -->
<script setup lang="ts">
import { PptxEditor, usePptxSource } from '@pptx-editor.dev/vue';

const { document: bytes, error } = usePptxSource('/deck.pptx');
</script>

<template>
  <p v-if="error" role="alert">{{ error.message }}</p>
  <div v-else style="height: 100vh">
    <PptxEditor :document="bytes" />
  </div>
</template>

Put deck.pptx in the public folder. usePptxSource checks HTTP failures and cancels its fetch when the component unmounts. To open and download local files, use the Vue component from the quickstart.

Limits

• Mount the app on the element from your index.html. The standard Vite Vue template uses #app.
• This setup assumes a client-rendered Vite app. In a server-rendered Vue application, render the editor on the client only.
• The editor fills its parent, so the parent needs a measured height.

Run the example

The examples/vue app builds against the package source, so it needs no package build. After you clone the repository and run bun install, run:

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

Next steps

• Quickstart: open, edit, and save a deck.
• Vue composition: arrange the editor parts.
• Installation: requirements and bundler setup.