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:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-toastr/dist/vue-toastr.umd.min.js"></script>

To install with npm

npm install vue-toastr

To install with yarn

yarn add vue-toastr

 

Importing and Using Toastr

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

import Vue from "vue";
import App from "./App.vue";

// import plugin
import VueToastr from "vue-toastr";

// use plugin
Vue.use(VueToastr);

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:

import Vue from "vue";
import App from "./App.vue";

// import plugin
import VueToastr from "vue-toastr";

// use plugin
Vue.use(VueToastr, {
  /* OverWrite Plugin Options if you need */
});

new Vue({
  render: h => h(App),
  mounted() {
    
    // then you can call toastr
    this.$toastr.s(
      "Hello world"
    );
  }
}).$mount("#app");

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

<template>
        <div>
            <a href="#" v-on:click.prevent="showSuccessToast">Display toast</a>
        </div>
</template>

<script>
      export default {
            methods: {
                 showSuccessToast() {
                    this.$toastr.s("Success", "Hello world");
                 }
            }
      }
</script>

 

Using Vue-Toastr as a Component

<div id="#app">
  <!-- Your vue application -->
  <vue-toastr ref="mytoast"></vue-toastr>
</div>


import Vue from "vue";
import App from "./App.vue";

// import plugin
import VueToastr from "vue-toastr";

// register component
Vue.component("vue-toastr", VueToastr);

new Vue({
  render: h => h(App),
  components: {
    // "vue-toastr": VueToastr,
    // VueToastr,
  },
  mounted() {

    this.$refs.mytoast.s(
      "Hello world"
    );
  }
}).$mount("#app");

 

Creating Toast

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

this.$toastr.s("SUCCESS MESSAGE", "Success Toast Title");
this.$toastr.e("ERRROR MESSAGE");
this.$toastr.w("WARNING MESSAGE");
this.$toastr.i("INFORMATION MESSAGE");

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

this.$toastr.Add({
  name: "UniqueToastName", 
  
  title: "Success", // Toast Title
  
  msg: "Operation done successfully", // Toast Message
  
  clickClose: false, // Click Close Disable
  
  timeout: 0, // Remember defaultTimeout is 5 sec.(5000) in this case the toast won't close automatically
  
  position: "toast-top-full-width", // Toast Position.
  
  type: "success", // Toast type,

  style: { backgroundColor: "blue", width: "150px" } 
});

 

Removing Toast

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

this.$toastr.Close(toast instance); // remove toast
this.$toastr.removeByName("UniqName"); // remove toast by name
this.$toastr.removeByType("error");

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

npm install vue-swal

To install with yarn

yarn add vue-swal

 

Usage

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)

App.vue

export default {
  methods: {
    alert() {
      this.$swal('Hello word!')
    }
  }
}

Examples:

– Text

export default {
  methods: {
    alert() {
      this.$swal({
         text: "Hello world!",
      });
    }
  }
}

  • Title

export default {
  methods: {
    alert() {
      this.$swal({
         title: "Hello world!",
      });
    }
  }
}

With icon:

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

export default {
  methods: {
    alert() {
      this.$swal({
         icon: "success"
      });
    }
  }
}

Button

export default {
  methods: {
    alert() {
      this.$swal({
         icon: "success",
         button: {
            {
               text: "OK",
               value: true,
               visible: true,
               className: "",
               closeModal: true,
             }
         }
      });
    }
  }
}

Buttons

export default {
  methods: {
    alert() {
      this.$swal({
         icon: "success",
         buttons: {
            cancel: {
    text: "Cancel",
    value: null,
    visible: false,
    className: "",
    closeModal: true,
  },
  confirm: {
    text: "OK",
    value: true,
    visible: true,
    className: "",
    closeModal: true
  }
         }
      });
    }
  }
}

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

 

 

0 0 vote
Article Rating
Share this: