Vue3 EasyMDE

1.0.1 verified Fri May 01 auth: no javascript

Vue3 component wrapper for EasyMDE markdown editor, version 1.0.1. Written in TypeScript, built by Rollup. Provides a drop-in <vue-easymde> component with v-model support, full EasyMDE options passthrough, access to the underlying EasyMDE instance, and TypeScript typings. Requires Vue 3.2+ and EasyMDE 2.16+ as peer dependencies. Suitable for Vue 3 projects needing a lightweight, customizable markdown editor.

Common errors

error Cannot find module 'vue3-easymde' or its corresponding type declarations. ↓

cause Missing TypeScript types due to improper import or tsconfig not including node_modules types.

fix

Ensure 'node_modules/vue3-easymde' contains 'index.d.ts'. Add '"types": ["vue3-easymde"]' to tsconfig.json or use 'import type' from the package.

error Uncaught TypeError: Cannot read properties of undefined (reading 'modelValue') ↓

cause Forgot to register the component globally or locally; component is not available in template.

fix

Call 'app.use(VueEasymde)' in main.ts or register component locally: 'components: { VueEasymde }'.

error Failed to resolve component: vue-easymde ↓

cause Component not registered or typo in template tag name.

fix

Use exact tag '<vue-easymde>' (all lowercase, hyphenated). Ensure component is registered.

Warnings

breaking EasyMDE version 2.x+ includes breaking changes. vue3-easymde depends on easymde ^2.16.1, which may differ from v1.x APIs. ↓

fix Ensure easymde dependency is updated to v2.16.1 or compatible. Refer to EasyMDE changelog for API changes.

deprecated No deprecated warnings known at this version; check EasyMDE upstream for deprecated options. ↓

fix Review EasyMDE documentation for deprecated configuration options.

gotcha Required CSS import: 'easymde/dist/easymde.min.css'. Forgetting this will result in unstyled editor. ↓

fix Import 'easymde/dist/easymde.min.css' in your main entry file (e.g., main.ts).

gotcha The component does NOT support SSR (Server-Side Rendering) because EasyMDE manipulates the DOM directly. ↓

fix Use client-only rendering (e.g., <ClientOnly> in Nuxt) or dynamic import with ssr: false.

gotcha EditorInstance is a type-only export. Attempting to use it as a value will cause runtime 'undefined' errors. ↓

fix Use 'import type { EditorInstance } from 'vue3-easymde'' to import the type.

Install

npm install vue3-easymde

yarn add vue3-easymde

pnpm add vue3-easymde

Imports

VueEasymde
wrong
```
import { VueEasymde } from 'vue3-easymde'
```
correct
```
import VueEasymde from 'vue3-easymde'
```
The library exports a single default export (the component). Named import will fail.
EditorInstance
wrong
```
import { EditorInstance } from 'vue3-easymde'
```
correct
```
import type { EditorInstance } from 'vue3-easymde'
```
EditorInstance is a TypeScript type, not a runtime value. Use 'import type' to avoid bundling issues.
Component registration
wrong
```
app.component('vue-easymde', VueEasymde)
```
correct
```
app.use(VueEasymde)
```
Using app.use(VueEasymde) registers the component globally as 'vue-easymde'. Manual component registration works but is unnecessary.

Quickstart

Set up Vue3 EasyMDE with v-model, options, event handling, and access to the EasyMDE instance.

// Install: npm install vue3-easymde easymde
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueEasymde from 'vue3-easymde'
import 'easymde/dist/easymde.min.css'

const app = createApp(App)
app.use(VueEasymde)
app.mount('#app')

// App.vue
<template>
  <vue-easymde v-model="markdown" :options="{ autofocus: true, spellChecker: false }" @change="handleChange" ref="editorRef"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { EditorInstance } from 'vue3-easymde'

const markdown = ref('# Hello')
const editorRef = ref<EditorInstance | null>(null)

function handleChange(value: string) {
  console.log('Content changed:', value)
}

function logMDEInstance() {
  if (editorRef.value) {
    console.log(editorRef.value.getMDEInstance())
  }
}
</script>