Rune for Vue
A Vue 3 rich-text editor in one component.
The Vue adapter gives you a <RuneEditor> component plus a useRune composable. Bind a config object and content, and Rune renders the whole editor UI — no build step, no dependencies, collaboration optional.
Why Rune for Vue
- 01
First-class Vue 3 component
<RuneEditor> with reactive :extensions and content props, plus a useRune composable for imperative control.
- 02
Config-driven UI
Toolbar, bubble menu, slash menu, and shortcuts all derive from one config object — toggle a feature and they update together.
- 03
Zero dependencies
Same zero-dependency core under the Vue adapter; nothing heavy added to your bundle.
$
npm install @parityfox/rune-editor@parityfox/rune-editor/vue
<script setup> import { RuneEditor } from '@parityfox/rune-editor/vue'; import config from './rune.config.js'; import '@parityfox/rune-editor/styles'; </script> <template> <RuneEditor :extensions="config.extensions" content="<p>Hello</p>" @change="(html) => console.log(html)" /> </template>
Questions
- How do I add a rich text editor to Vue with Rune?
- Install @parityfox/rune-editor, import RuneEditor from '@parityfox/rune-editor/vue', import the styles, and use <RuneEditor :extensions="config.extensions" content="…" @change="…" /> in your template.
- Which Vue version does Rune support?
- The adapter targets Vue 3 with the Composition API and <script setup>.
- Does the Vue adapter support collaboration?
- Yes. Rune's opt-in Yjs collaboration layer works through the Vue adapter for live presence, comments, and tracked changes.
Add it to your Vue app.
Install the package and drop in one component — configurable, themeable, collaboration-ready.