Vue component for rich content strings

This library provides a simple vue component to render text with rich placeholder replacements. The parameters that are replaced can either be a string or an object that allows rendering any Vue component into the text. Placeholders are wrapped in brackets, like {placeholder}. Markdown can be used for basic text formatting.

Installation

npm install --save @juliushaertl/vue-richtext

Basic usage with simple text placeholders

Input string: The file {file} was added…
Arguments:
- file: 'MyDocument'
Renders: The file 'MyDocument' was added…

Usage with vue components

Input string: The file {file} was added by {username}
Arguments:
- file: 'MyDocument'
- username: { component: User, props: { username: 'Jane Doe' }
Renders: The file 'MyDocument' was added by <User>Jane Doe</User>

Usage with markdown

Input string: The **file** *{file}* was added by {username}
Arguments:
- file: 'MyDocument'
- username: { component: User, props: { username: 'Jane Doe' }
Renders: The <strong>file</strong> <i>'MyDocument'</i> was added by <User>Jane Doe</User>

Documentation