Welcome
VMarkdownEditor
Vuero ship <VMarkdownEditor />
component that combines an accessible Markdown editor with a live preview using <VMarkdownPreview />
.
Under the hood, this component uses textarea-markdown-editor
exposed api to provide a powerfull Markdown editor for vue 3 with extendable commands support.
Toolbar customization
Toolbar can be customized by passing a toolbar
property. You can group commands to display them in a dropdown menu.
Actions can be one of bold
, italic
, strike-through
, h1
, h2
, h3
, h4
, h5
, h6
, unordered-list
, ordered-list
, code-block
, code-inline
, code
, link
, image
, block-quotes
You also can pass a custom action to the toolbar by passing a function to the action
property.
Markdown syntax supported
VMarkdownEditor Props
Here is the full props available for <VMarkdownEditor />
component:
Props | Default | Type |
---|---|---|
model-value | '' | string |
commands | [] | textarea-markdown-editor commands |
options | { enableIndentExtension: true, enableLinkPasteExtension: true, enableOrderedListAutoCorrectExtension: true, enablePrefixWrappingExtension: true, enableProperLineRemoveBehaviorExtension: true, } | textarea-markdown-editor options |
toolbar | undefined | |
autogrow | false | boolean |
VMarkdownEditor Events
Here is the full events available for <VMarkdownEditor />
component:
Event | Callback | Description |
---|---|---|
@update:modelValue | (value: string) => void | Raised when the textarea value changed Use v-model directive to bind values |
VMarkdownEditor Slots
Here is the full slots available for <VMarkdownEditor />
component:
Slot | Properties | Description |
---|---|---|
#before-textarea | <{ value: string }> | Display content before the textarea when in write mode |
#after-textarea | <{ value: string }> | Display content after the textarea when in write mode |
#preview | <{ value: string }> | Replace preview with custom content |