{"id":26627,"library":"vue3-easymde","title":"Vue3 EasyMDE","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","Vue3","EasyMDE","Markdown","editor","typescript"],"install":[{"cmd":"npm install vue3-easymde","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-easymde","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-easymde","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; EasyMDE library required at runtime","package":"easymde","optional":false},{"reason":"Peer dependency; Vue 3 runtime required","package":"vue","optional":false}],"imports":[{"note":"The library exports a single default export (the component). Named import will fail.","wrong":"import { VueEasymde } from 'vue3-easymde'","symbol":"VueEasymde","correct":"import VueEasymde from 'vue3-easymde'"},{"note":"EditorInstance is a TypeScript type, not a runtime value. Use 'import type' to avoid bundling issues.","wrong":"import { EditorInstance } from 'vue3-easymde'","symbol":"EditorInstance","correct":"import type { EditorInstance } from 'vue3-easymde'"},{"note":"Using app.use(VueEasymde) registers the component globally as 'vue-easymde'. Manual component registration works but is unnecessary.","wrong":"app.component('vue-easymde', VueEasymde)","symbol":"Component registration","correct":"app.use(VueEasymde)"}],"quickstart":{"code":"// Install: npm install vue3-easymde easymde\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport VueEasymde from 'vue3-easymde'\nimport 'easymde/dist/easymde.min.css'\n\nconst app = createApp(App)\napp.use(VueEasymde)\napp.mount('#app')\n\n// App.vue\n<template>\n  <vue-easymde v-model=\"markdown\" :options=\"{ autofocus: true, spellChecker: false }\" @change=\"handleChange\" ref=\"editorRef\"/>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { EditorInstance } from 'vue3-easymde'\n\nconst markdown = ref('# Hello')\nconst editorRef = ref<EditorInstance | null>(null)\n\nfunction handleChange(value: string) {\n  console.log('Content changed:', value)\n}\n\nfunction logMDEInstance() {\n  if (editorRef.value) {\n    console.log(editorRef.value.getMDEInstance())\n  }\n}\n</script>","lang":"typescript","description":"Set up Vue3 EasyMDE with v-model, options, event handling, and access to the EasyMDE instance."},"warnings":[{"fix":"Ensure easymde dependency is updated to v2.16.1 or compatible. Refer to EasyMDE changelog for API changes.","message":"EasyMDE version 2.x+ includes breaking changes. vue3-easymde depends on easymde ^2.16.1, which may differ from v1.x APIs.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Review EasyMDE documentation for deprecated configuration options.","message":"No deprecated warnings known at this version; check EasyMDE upstream for deprecated options.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Import 'easymde/dist/easymde.min.css' in your main entry file (e.g., main.ts).","message":"Required CSS import: 'easymde/dist/easymde.min.css'. Forgetting this will result in unstyled editor.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use client-only rendering (e.g., <ClientOnly> in Nuxt) or dynamic import with ssr: false.","message":"The component does NOT support SSR (Server-Side Rendering) because EasyMDE manipulates the DOM directly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use 'import type { EditorInstance } from 'vue3-easymde'' to import the type.","message":"EditorInstance is a type-only export. Attempting to use it as a value will cause runtime 'undefined' errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure 'node_modules/vue3-easymde' contains 'index.d.ts'. Add '\"types\": [\"vue3-easymde\"]' to tsconfig.json or use 'import type' from the package.","cause":"Missing TypeScript types due to improper import or tsconfig not including node_modules types.","error":"Cannot find module 'vue3-easymde' or its corresponding type declarations."},{"fix":"Call 'app.use(VueEasymde)' in main.ts or register component locally: 'components: { VueEasymde }'.","cause":"Forgot to register the component globally or locally; component is not available in template.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'modelValue')"},{"fix":"Use exact tag '<vue-easymde>' (all lowercase, hyphenated). Ensure component is registered.","cause":"Component not registered or typo in template tag name.","error":"Failed to resolve component: vue-easymde"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}