Custom Component

Register you component globally in you entry file (main.js or as you call it) and pass it's name in componentName property of data object. Under the hood it uses dynamic components.

Example:

this.flashMessage.show({
    componentName: 'CustomComponent',
	clickable: false,
	time: 0
});

In case if you use combination of clickable: false and time: 0 you should provide user interface element to close message block. Use flashMessage.deleteMessage(id) method.

Your component should be able to get prop 'messageId'

<template lang="html">
	<div class="custom-component">
		<button
			class="close-btn"
			@click="flashMessage.deleteMessage(messageId)"
		/>
		<h2>Meet vue number input</h2>
		<p>
			This is another component I'm working on,
			<a
				target="_blank"
				href="https://smwbtech.github.io/vue-number-input/"
				>vue-number-input</a
			>
		</p>
		<VueNumberInput
			v-model="value"
			class="custom-input"
			:inputClass="'custom-input-class'"
		/>
	</div>
</template>

<script>
	export default {
		props: {
			messageId: {
				type: Number,
				required: true
			}
		}
	}
</script>