Nuxt

Use Echo Editor in a Nuxt 3 / Nuxt 4 application.

Echo Editor is a browser component (it needs the DOM for ProseMirror), so render it on the client.

Install

npm
pnpm
bun
yarn
npm i vue-echo-editor

Add the styles

nuxt.config.ts
export default defineNuxtConfig({
  css: ['vue-echo-editor/style.css'],
  build: {
    transpile: ['vue-echo-editor'],
  },
})

Create a client-only component

Name the file with a .client.vue suffix, or wrap the editor in <ClientOnly>:

components/RichEditor.client.vue
<script setup lang="ts">
import { EchoEditor, BaseKit, History, Heading, Bold, Italic, Link, BulletList } from 'vue-echo-editor'

const model = defineModel<string>({ default: '' })
const extensions = [BaseKit, History, Heading, Bold, Italic, Link, BulletList]
</script>

<template>
  <EchoEditor v-model="model" :extensions="extensions" />
</template>

Use it

pages/index.vue
<script setup lang="ts">
const content = ref('<p>Hello from Nuxt</p>')
</script>

<template>
  <RichEditor v-model="content" />
</template>

Rendering stored content on the server

To display saved documents during SSR (for SEO or a read-only view) you do not need the editor. Render the stored HTML inside an element with the EchoContentView class so it gets the editor's typography:

<template>
  <div class="echo-editor echo-editor-ui">
    <div class="EchoContentView" v-html="article.html" />
  </div>
</template>

Colour mode

Pass Nuxt's colour mode to the editor so it follows your site theme:

<script setup lang="ts">
const colorMode = useColorMode()
</script>

<template>
  <EchoEditor :dark="colorMode.value === 'dark'" :extensions="extensions" />
</template>
Quick start
Render your first editor with v-model in under a minute.
Migrating to v1
Upgrade from Echo Editor 0.x (Tiptap 2) to 1.x (Tiptap 3).