ImreC / vue-sweetalert2

A convenient wrapper for sweetalert2.

vue-sweetalert2

Vue.js wrapper for SweetAlert2. With support SSR.

Demo

---

Get started

npm install -S vue-sweetalert2

// main.js

import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(VueSweetalert2);

Now in the global object, you can access all the methods of sweetalert2.

If you want to add global options like button colors, do something like this: // main.js

import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

const options = {
  confirmButtonColor: '#FFFFFF',
  cancelButtonColor: '#000000'
}

Vue.use(VueSweetalert2, options)

// example-vue-component.vue

<template>
    <button v-on:click="showAlert">Hello world</button>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        showAlert(){
            // Use sweetalert2
            this.$swal('Hello Vue world!!!');
        }
    }
}
</script>

// Or

Vue.swal('Hello Vue world!!!');

Nuxt.js

Install dependencies:

npm install -S vue-sweetalert2

Add vue-sweetalert2/nuxt to modules section of nuxt.config.js

{
  modules: [
    'vue-sweetalert2/nuxt'
  ]
}

Or pass in global options like this:

{
  modules: [
    [
      'vue-sweetalert2/nuxt',
      {
        confirmButtonColor: '#FFFFFF'
      }
    ]
  ]
}

The documentation for sweetalert2, you can find here.