Vue.js wrapper for SweetAlert2. With support SSR.
# bash
npm install -S vue-sweetalert2{
//...tsconfig.json
"types": [
"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!!!');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);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';Install dependencies:
npm install -S vue-sweetalert2Add 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'
}
]
]
}