Skip to content

Nuxt 3

Nuxt WYSIWYG editor — SSR-safe rich text for Nuxt 3

A rich text editor that respects universal rendering: browser-guarded init (no <ClientOnly> gymnastics), runtime-config keys, and ~41 KB of dependency-free vanilla JS under the official Vue 3 component.

Get a free API key Live demo
SSR
safe by default
no <ClientOnly> needed
~41 KB
editor core
zero dependencies
13
plugins included
tables, media, code…
Free
lifetime plan
no credit card

Setup

Nuxt 3 in four steps

  1. 1

    Install

    The official Vue 3 component works in Nuxt 3 as-is.

    bash
    npm install @liteeditor/vue @liteeditor/editor
  2. 2

    Create a component

    Initialization is guarded to run only in the browser after mount, so it is safe under Nuxt universal rendering — no <ClientOnly> wrapper required.

    vue
    <!-- components/RichEditor.vue -->
<script setup>
import { ref } from 'vue'
import { LiteEditor } from '@liteeditor/vue'

const editorRef = ref(null)
const config = useRuntimeConfig()

defineExpose({ getContent: () => editorRef.value?.getContent() })
</script>

<template>
  <LiteEditor
    ref="editorRef"
    :api-key="config.public.liteeditorKey"
    plugins="all"
    toolbar="full"
    :menubar="true"
    :height="320"
  />
</template>
  3. 3

    Expose the key via runtime config

    Keep the key out of source. Your free key works on localhost instantly — localhost is pre-approved.

    ts
    // nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: { liteeditorKey: process.env.LITEEDITOR_KEY }
  }
})
  4. 4

    Save the HTML

    Read the document with getContent() on the template ref and post it to your Nitro route — the editor emits clean, self-contained HTML.

    vue
    const html = editorRef.value?.getContent()
await $fetch('/api/posts', { method: 'POST', body: { html } })

Live

The same editor, live

This page is itself server-rendered Vue — the editor below hydrated exactly the way it does in Nuxt.

Loading editor…

FAQ

Nuxt rich text editor FAQ

LiteEditor's @liteeditor/vue component is built for Nuxt: initialization is browser-guarded so universal rendering just works, the editor is ~41 KB gzipped with zero dependencies, and tables, images, media embeds and code samples are included. There is a free lifetime plan.

See also: Vue 3 component · Next.js guide · TinyMCE comparison

Add a rich text editor to your Nuxt app

Free lifetime plan · No credit card · localhost pre-approved for development

Try the live demo Get a free API key Docs
npm install @liteeditor/vue @liteeditor/editor