Alert
The v-alert component is used to convey important information to the user. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions
API
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Specifies that the Alert can be closed
Designates a specific icon
Sets the transition mode (does not apply to transition-group) vue docs
Sets the transition origin
Alert will have an outline
Sets the component transition. Can be one of the built in transitions or your own.
Specify a success, info, warning or error alert. Uses the contextual color and a pre-defined icon.
Controls visibility
Examples
Closable
Using v-model, you can control the state of the Alert. If you don't want to assign a v-model and just display the alert, you can simply assign the prop value.
Custom Icon / No Icon
You can easily assign a custom icon or remove it altogether.
Display transition
You can apply a custom transition to the show/hide of the alert.
Outline
Outline alerts inherit their borders from the current color applied.