Syncfusion AI Assistant

How can I help you?

Getting Started with the Vue Markdown Editor Component in Vue

25 May 20264 minutes to read

The Syncfusion Vue Markdown Editor is a web-based editor that enables users to create, edit, and format Markdown content with features such as table support and structured content formatting. This article provides a step-by-step guide for setting up a Vite project with a TypeScript environment and integrating the Syncfusion Vue Markdown Editor component using the Composition API.

To get started quickly with the Vue Markdown Editor, refer to this video tutorial:

Prerequisites

This guide uses Vite as the bundler and development environment. Install Node.js 24.13.0 or higher before proceeding. For detailed information about Vite’s capabilities and configuration options, refer to the Vite documentation.

Create a Vue Application

Run the following commands to set up a Vue application:

npm create vite@latest my-app -- --template vue-ts

This command will prompt you to install the required packages and start the application. Select the options as shown below.

Markdown Editor Initial setup

As Syncfusion packages are not installed yet, currently, the No option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:

cd my-app
npm install

Add Syncfusion Markdown Editor packages

Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.

npm install @syncfusion/ej2-vue-richtexteditor

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in the <style> section of src/App.vue file using the following code.

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css';

IMPORTANT

To apply the application-specific styles correctly remove all the default styles from src/style.css. You can also refer to the themes section for details about built-in themes and CSS references for individual controls.

Module injection

The following modules provide the basic features of the Markdown Editor.

  • Toolbar - Inject this module to use Toolbar feature.
  • Link - Inject this module to use link feature in Markdown Editor.
  • Image- Inject this module to use image feature in Markdown Editor.
  • MarkdownEditor - Inject this module to use Rich Text Editor as markdown editor.

IMPORTANT

Additional feature modules are available here.

Adding Markdown Editor component

Now, you can start adding Vue Markdown Editor component in the application. For getting started, add the Markdown Editor component in src/App.vue file using following sample.

<template>
        <ejs-richtexteditor editorMode="Markdown"></ejs-richtexteditor>
</template>

<script setup>
import { provide } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Table, Image, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';

provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css";
</style>
<template>
 <ejs-richtexteditor editorMode="Markdown"></ejs-richtexteditor>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent
    },
   data: function () {
    return {
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
  },
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/tailwind3.css";
</style>

Run the project

To run the project, use the following command:

npm run dev

See Also