vue-sweetalert2

Vue.js wrapper for SweetAlert2. With support SSR.

changelog

---

Attention:

When using "Vue3: Composition API" it is better not to use this wrapper. It is more practical to call sweetalert2 directly.

Also, it is better to do it to get feedback faster, and be closer to the documentation.

---

---

Get started

Basics

Bash

1npm install -S vue-sweetalert2

Add types to TypeScript project

1{
2  //...tsconfig.json
3  "types": [
4    "vue-sweetalert2"
5  ],
6}

vue 2

1// main.js
2import Vue from 'vue';
3import VueSweetalert2 from 'vue-sweetalert2';
4
5// If you don't need the styles, do not connect
6import 'sweetalert2/dist/sweetalert2.min.css';
7
8Vue.use(VueSweetalert2);

vue 3

1// main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import './index.css'
5
6import VueSweetalert2 from 'vue-sweetalert2';
7import 'sweetalert2/dist/sweetalert2.min.css';
8
9const app = createApp(App)
10
11app.use(VueSweetalert2);
12
13app.mount('#app');

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

1// example-vue-component.vue
2<template>
3  <button @click="showAlert">Hello world</button>
4</template>
5
6<script>
7export default {
8  methods: {
9    showAlert() {
10      // Use sweetalert2
11      this.$swal('Hello Vue world!!!');
12    },
13  },
14};
15</script>

// Or

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

Global options

If you want to add global options like button colors, do something like this:

1// main.js
2import Vue from 'vue';
3import VueSweetalert2 from 'vue-sweetalert2';
4
5const options = {
6  confirmButtonColor: '#41b882',
7  cancelButtonColor: '#ff7674',
8};
9
10Vue.use(VueSweetalert2, options);

Custom styling

Using scss styles are loaded so

1// main.js
2import Vue from 'vue';
3import VueSweetalert2 from 'vue-sweetalert2';
4
5Vue.use(VueSweetalert2);

1// style.scss
2@import '~sweetalert2/src/variables';
3
4$swal2-background: #990000;
5
6@import '~sweetalert2/src/sweetalert2';

Nuxt.js

Install dependencies:

1npm install -S vue-sweetalert2

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

1{
2  modules: ['vue-sweetalert2/nuxt'];
3}

Or pass in global options like this:

1{
2  modules: [
3    'vue-sweetalert2/nuxt',
4  ],
5  sweetalert: {
6    confirmButtonColor: '#41b882',
7    cancelButtonColor: '#ff7674'
8  }
9}

Using a different theme in Nuxt

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

1{
2  // Before doing so, install the "@sweetalert2/theme-dark"
3  css:     [ '@sweetalert2/theme-dark' ],
4  modules: ['vue-sweetalert2/nuxt/no-css'];
5}

The documentation for sweetalert2, you can find here.