Displaying Nice Messages And Alerts in Vuejs Applications With Toastr and Swal

Displaying Nice Messages And Alerts in Vuejs Applications With Toastr and Swal

Alerts and Messages is an integral part in any Vuejs application, in this article i will demonstrate how to display toast messages and alerts in vuejs framework.

 

 

To display toast messages in vuejs we will use vue-toastr plugin, you can find it in github.

Toastr Installation

To use toastr directly in browser via cdn:

To install with npm

To install with yarn

 

Importing and Using Toastr

To use vue-toastr as a plugin you have to import and use it like this:

Then you have two choices whether to use as a plugin or as a component:

 

Using Vue-Toastr as a Plugin

To use vue-toastr as a plugin you have to import and use it like this:

Then you can access $toastr instance in any component like this:

 

Using Vue-Toastr as a Component

 

Creating Toast

To display a toast message vue-toast provides a variety of methods of different scenarios such as success or errors:

In addition to these methods vue-toast provides the Add method which gives you more control over toast display:

 

Removing Toast

It’s supposed that toast messages closed automatically after some seconds but you can explicitly call some helper methods to remove toast.

For more details about vue-toast take a look at the docs.

 

Display Swal Messages in Vue-js

The second plugin in this tutorial is vue-swal, this is a wrapper of the Sweet Alert javascript plugin.

 

Installation

To install with npm

To install with yarn

 

Usage

App.vue

Examples:

– Text

  • Title

With icon:

icons such as “success”, “error”, “warning”,”info”

Button

Buttons

For the full list of the available options and examples refer to SweetAlert docs.

 

 

Share this: