Need private packages and team management tools?Check out npm Teams »

vue-sweetalert2

3.0.3 • Public • Published

vue-sweetalert2

npm

Coverage Status

Vue.js wrapper for SweetAlert2. With support SSR.

VueSweetalert2

Demo

vue-sweetalert2 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.

Install

npm i vue-sweetalert2

DownloadsWeekly Downloads

13,963

Version

3.0.3

License

MIT

Unpacked Size

11.9 kB

Total Files

12

Last publish

Collaborators

  • avatar