vue-sweetalert2

Vue.js wrapper for SweetAlert2. With support SSR.

Demo

---

Get started

Basics

npm install -S vue-sweetalert2

// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

// If you don't need the styles, do not connect
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);

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

// example-vue-component.vue
<template>
    <button @click="showAlert">Hello world</button>
</template>

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

// Or

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

Global options

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: '#41b882',
    cancelButtonColor: '#ff7674',
};

Vue.use(VueSweetalert2, options);

Custom styling

Using scss styles are loaded so

// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

Vue.use(VueSweetalert2);

// style.scss
@import '~sweetalert2/src/variables';

$swal2-background: #990000;

@import '~sweetalert2/src/sweetalert2';

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: '#41b882',
        cancelButtonColor: '#ff7674'
      }
    ]
  ]
}

The documentation for sweetalert2, you can find here.