Vue Component for Markdown Editing and Preview using Vuetify.js

vuetify-markdown-editor is a Vue.js component for markdown editing and previewing using Vuetify.js and markdown-it.

vue markdown editor wysiwyg, vuetify markdown editor, best vue markdown editor, markdown editor example, nuxt markdown editor, preview markdown vscode, markdown editor online

Features

TypeScript support
Single and Embedded Mode
Editor-only mode and Editor-Preview
Code highlighting
Choose emoji
math formula (see markdown-it-texmath)
Upload and preview images (to use the uploaded image in markdown, use the file name as a link)
Mermaid outline view (use code block with a mermaid)

Markdown Editor Based On The Ace And Bootstrap Editor | codeparlMarkdown

How to make use of it:

Install and download:

yarn add @nuxtjs/vuetify -D
# OR
npm install @nuxtjs/vuetify -D

This package can be used in the Node.js module:

<template>
  <v-app>
    <Editor
      mode="preview"
      ref="editor"
      hint="Hint"
      :outline="false"
      :render-config="renderConfig"
      v-model="text"
    />
  </v-app>
</template>

<script>
import { Editor } from "vuetify-markdown-editor";
import { VApp } from 'vuetify/lib';

export default {
  name: "app",
  components: {
    Editor,
    VApp
  },
  data() {
    return {
      text: "",
      renderConfig: {
        // Mermaid config
        mermaid: {
          theme: "dark"
        }
      }
    };
  },
  mounted() {
    // Access properties or methods using $refs
    // this.$refs.editor.focus();
    // this.$refs.editor.upload();

    // Dark theme
    this.$vuetify.theme.dark = true;
  }
};
</script>

Props

Prop	Default	Description
value	`''`	String that binds to the textarea
mode	`'preview'`	Possible value `'editor'`, `'preview'` or `'viewer'`. When set to `'editor'` or `'viewer'`, only the editor or viewer is displayed, while `'preview'` mode displays both.
renderConfig	`undefined`	Override default configurations
outline	`false`	The border will be outlined instead of card style
color	`undefined`	The outline and icon’s color
nativeEmoji	`false`	Use native emoji instead of pictures
emoji	`true`	Enable emoji input
emojiSet	`"apple"`	Supported emoji sets: `'apple', 'google', 'twitter', 'facebook'`
image	`true`	Enable image upload
fileTarget	`'/'`	Image upload target uri
fileFilter	`file => file.type.startsWith('image')`	Allow only specific files. Return true to allow, false to reject
baseUrl	`'/'`	The baseUrl for uploaded images. Must end with a slash (mainly used in `viewer` mode)