Vue Flashes
Vue Flashes is a package that simply adds a generic way of displaying (Flash) messages, like you would when you want to display both error- and success-messages.
Installation
To install this package follow the following steps.
- Run
npm install vue-flashes
- Import the plugin using;;Vue;......;
- You are now able to run any of the message functions in this plugin.
Styling your messages
A message has the .message
class by default, and by default has the type error
.
You can style specific message types by styling; .error-message
for error messaging.
.message-container
Message Functions
Message
In your Vue component display a message that will only be removed when it is either clicked or removed using the reset function. As you can see in the example below the second parameter is to specify a type that you want the message to have.
// HelloWorld.vue { this; // Create a message of the default type ('error') this; // Create a message of type 'success' };
Flash message
Much like the $message
function you can display a message for a short period of time (3 seconds by default).
Below you can see all possible varieties of the $flashMessage
call.
// HelloWorld.vue { this; // Create a message of the default type ('error') that lasts 3 seconds this; // Create a message of type 'success' that lasts 3 seconds this; // Create a message of type 'success' that lasts 1 second };
Reset messages
Reset messages does exactly what it says it will; It removes all messages that have previously been added.
// HelloWorld.vue { this; // ... this; };