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}.

Installation

npm install --save @juliushaertl/vue-richtext

Usage

• Input string: The file {file} was added by {username}
• Arguments:
  • file: 'MyDocument'
  • username: { component: User, props: { username: 'Jane Doe' }

Example output

The file MyDocument.odt was added by Jane Doe

Example source

<template>
	<RichText :text="text" :arguments="args" />
</template>

<script>

import User from './User'

export default {
    name: 'RichTextDemo',
    data: () => {
        return {
            text: 'The file {file} was added by {username}',
            args: {
                file: 'MyDocument.odt',
                username: {
                    component: User,
                    props: {
                        user: 'Jane Doe'
                    }
                }
            }
        }
    }
}
</script>

User.vue

<template>
    <span class="user">{{ user }}</span>
</template>

<script>
export default {
	name: 'User',
	props: {
		user: {
			type: String,
			default: ''
		}
	}
}
</script>

<style scoped>
.user {
	border-radius: 3px;
	background-color: #eee;
	padding: 3px;
}
</style>