Vue Sweet Alert 2 Loading Overlay

Vue.js plugin to easily add loading overlays (extends vue-sweetalert2)

Installation

# npm
npm install vue-swal2-loading-overlay --save

# Yarn
yarn add vue-swal2-loading-overlay

Usage

1. Install the plugin (for exemple, in your main.js file)

//You need to have 'vue-sweetalert2' installed for 'vue-swal2-loading-overlay' to work

import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';
import LoadingOverlay from 'vue-swal2-loading-overlay';

Vue.use(VueSweetalert2);
Vue.use(LoadingOverlay);

new Vue({
  el: '#app'
});

2. Profit! Wherever you could call this.$swal({}) you can also call this.$loading.show(). Example:

<template>
  <h4>I wanna hide this content until I finish loading something</h4>
</template>

<script>
  export default {
      mounted(){
          this.$loading.show({ background: 'black', color: '#00FF00' });
      }
  }
</script>

API methods

this.$loading.show(opts)

Shows the loading indicator. You can specify the following properties by passing the opts object parameter:

Property	Result	Defaults
background	Changes the overlay background color	'white'
color	Changes the loading indicator color	'#3085d6'
animation	If set to false, 'show' and 'hide' animations will be disabled	true

You can also omit the opts parameter and it will use the defaults.

this.$loading.hide()

Hides the loading indicator.

Browser support

Same as vue-sweetalert2 and sweetalert2.

Related projects

• sweetalert2/sweetalert2 - Sweet Alert 2
• avil13/vue-sweetalert2 - Vue.js wrapper

License

Licensed under MIT.