vue3-easymde

library1.0.1jsnpmunverified

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.

web-framework serialization

npm install vue3-easymde

package ↗

INSTALL

IMPORT

SIG · VUE3-EASYMDE

vue3-easymde

web-frameworkjavascriptv1.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueEasymde

✓ import VueEasymde from 'vue3-easymde'

✗ import { VueEasymde } from 'vue3-easymde'

The library exports a single default export (the component). Named import will fail.

EditorInstance

✓ import type { EditorInstance } from 'vue3-easymde'

✗ import { EditorInstance } from 'vue3-easymde'

EditorInstance is a TypeScript type, not a runtime value. Use 'import type' to avoid bundling issues.

Component registration

✓ app.use(VueEasymde)

✗ app.component('vue-easymde', VueEasymde)

Using app.use(VueEasymde) registers the component globally as 'vue-easymde'. Manual component registration works but is unnecessary.

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>

Debug

Known issues

breakingEasyMDE 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.

affects: >=1.0.0

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

fix

Review EasyMDE documentation for deprecated configuration options.

affects: >=1.0.0

gotchaRequired 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).

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaEditorInstance 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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.

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

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 }'.

Failed to resolve component: vue-easymde

Component not registered or typo in template tag name.

fix

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

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

easymderequiredPeer dependency; EasyMDE library required at runtime

vuerequiredPeer dependency; Vue 3 runtime required

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue3-easymde ↗