Skip to content

Vue

A v-model component for Vue 3.3+. Safe for server-side rendering.

On this page
Package@open-wysiwyg-editor/vue(opens in a new tab)Requires Vue 3.3+

Install

Terminal
npm install @open-wysiwyg-editor/vue

Usage

<script setup lang="ts">
import { ref } from "vue";
import { RichTextEditor } from "@open-wysiwyg-editor/vue";
import "@open-wysiwyg-editor/vue/style.css";

const html = ref("<p>Hello <strong>world</strong></p>");
</script>

<template>
  <RichTextEditor v-model="html" placeholder="Write something…" />
</template>

Good to know

  • options takes everything createEditor() accepts except element. Callbacks and runtime options follow changes; the rest is read at mount, so remount with a new :key.
  • The editor starts in onMounted, so it works in Nuxt and Vite SSR without <ClientOnly>.
  • Events: update:modelValue (HTML) and ready (the editor). A template ref exposes editor.

Always sanitize on the server

The editor sanitizes what it loads and produces, but that is not a security boundary: anyone can post any string to your API. Sanitize the HTML again with a library you trust before you store it or render it for other users.

Edit this page on GitHub