@juliushaertl/vue-richtext

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

A full example is shown in the documentation