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.

---

!VueSweetalert2

!vue-sweetalert2 demo

---

Get started

$3

#### Bash
``bash
npm install -S vue-sweetalert2
`

$3

`js
{
//...tsconfig.json
"types": [
"vue-sweetalert2"
],
}
`

vue 2

`js
// 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);
`

vue 3

`js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

const app = createApp(App)

app.use(VueSweetalert2);

app.mount('#app');
`

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

`html
// example-vue-component.vue



`

// Or

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

$3

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

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

const options = {
confirmButtonColor: '#41b882',
cancelButtonColor: '#ff7674',
};

Vue.use(VueSweetalert2, options);
`

$3

Using scss styles are loaded so

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

Vue.use(VueSweetalert2);
`

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

$swal2-background: #990000;

@import '~sweetalert2/src/sweetalert2';
`

Nuxt.js

Install dependencies:

`bash
npm install -S vue-sweetalert2
`

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

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

Or pass in global options like this:

`js
{
modules: [
'vue-sweetalert2/nuxt',
],
sweetalert: {
confirmButtonColor: '#41b882',
cancelButtonColor: '#ff7674'
}
}
`

$3

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

`js
{
// Before doing so, install the "@sweetalert2/theme-dark"
css: [ '@sweetalert2/theme-dark' ],
modules: ['vue-sweetalert2/nuxt/no-css'];
}
`

The documentation for sweetalert2`, you can find here.