@codedungeon/vue-messenger

vue-messenger

Description

Vue Messenger is the vue partner to Codedungeon messenger suite

Installation

Using npm

npm i @codedungeon/vue-messenger

Using yarn

yarn @codedungeon/vue-messenger

Usage

• Vue Messenger requires at least the title or description prop
• If title and description are supplied, title will be bold
• If only title is supplied, it will be moved to description attribute (no title displayed)

Minimal

<crm-message type="info" description="Message Title" description="Message Description">

Success Message with icon

<crm-message type="success" description="Success" description="Contact Updated Successfully" :icon="true">

Warning Message with auto close

<crm-message type="warning" description="Warning" description="The light is turning red soon" :auto-close="true" auto-close-delay="2000" :icon="true">

...
errors from parent data
errors = ["error message one","error message two"]
...
<crm-message type="error" description="Validation Failed" description="There were 2 errors" :more="errors" :icon="true">

Props

Vue Messenger provides the following props

Events

Vue Messenger provides the following events

Methods

Vue Messenger provides the following methods You can procedurally update message from parent component using an the component updateMessage method which accepts on object of message options

Note: All options will override default component options

let msgOptions = { type: "success", title: "Success", description: "Contact Updated Successfully" }
this.$refs["crm-message"].updateMessage(msgOptions)

Contributing

Please see CONTRIBUTING for details.

Changelog

Please see CHANGELOG for details.

Security

If you discover any security related issues, please email support@codedungeon.io instead of using the issue tracker.

Credits

vue-messenger written by Mike Erickson

E-Mail: mike.erickson@codedungeon.io

Twitter: @codedungeon

Website: codedungeon.io

License

Copyright © 2020 Mike Erickson Released under the MIT License