2
2
3
3
[ ![ npm] ( https://img.shields.io/npm/v/vue-sweetalert2.svg )] ( https://www.npmjs.com/package/vue-sweetalert2 )
4
4
5
+ [ ![ Coverage Status] ( https://coveralls.io/repos/github/avil13/vue-sweetalert2/badge.svg?branch=master )] ( https://coveralls.io/github/avil13/vue-sweetalert2?branch=master )
6
+
5
7
Vue.js wrapper for SweetAlert2. With support SSR.
6
8
7
9
![ VueSweetalert2] ( assets/logo.png )
@@ -15,11 +17,11 @@ Vue.js wrapper for SweetAlert2. With support SSR.
15
17
## Get started
16
18
17
19
### Basics
20
+
18
21
``` bash
19
22
npm install -S vue-sweetalert2
20
23
```
21
24
22
-
23
25
``` js
24
26
// main.js
25
27
import Vue from ' vue' ;
@@ -40,44 +42,50 @@ Now in the global object, you can access all the methods of [sweetalert2](https:
40
42
</template >
41
43
42
44
<script >
43
- export default {
44
- methods: {
45
- showAlert (){
46
- // Use sweetalert2
47
- this .$swal (' Hello Vue world!!!' );
48
- }
49
- }
50
- }
45
+ export default {
46
+ methods: {
47
+ showAlert () {
48
+ // Use sweetalert2
49
+ this .$swal (' Hello Vue world!!!' );
50
+ },
51
+ },
52
+ };
51
53
</script >
52
54
```
53
55
54
56
// Or
57
+
55
58
``` js
56
59
Vue .swal (' Hello Vue world!!!' );
57
60
```
58
61
59
62
### Global options
63
+
60
64
If you want to add global options like button colors, do something like this:
65
+
61
66
``` js
62
67
// main.js
63
68
import Vue from ' vue' ;
64
69
import VueSweetalert2 from ' vue-sweetalert2' ;
65
70
66
71
const options = {
67
- confirmButtonColor: ' #41b882' ,
68
- cancelButtonColor: ' #ff7674'
69
- }
72
+ confirmButtonColor: ' #41b882' ,
73
+ cancelButtonColor: ' #ff7674' ,
74
+ };
70
75
71
- Vue .use (VueSweetalert2, options)
76
+ Vue .use (VueSweetalert2, options);
72
77
```
78
+
73
79
### Custom styling
80
+
74
81
Using scss styles are loaded so
82
+
75
83
``` js
76
84
// main.js
77
85
import Vue from ' vue' ;
78
86
import VueSweetalert2 from ' vue-sweetalert2' ;
79
87
80
- Vue .use (VueSweetalert2)
88
+ Vue .use (VueSweetalert2);
81
89
```
82
90
83
91
``` scss
@@ -89,10 +97,6 @@ $swal2-background: #990000;
89
97
@import ' ~sweetalert2/src/sweetalert2' ;
90
98
```
91
99
92
-
93
-
94
-
95
-
96
100
## Nuxt.js
97
101
98
102
Install dependencies:
@@ -105,9 +109,7 @@ Add `vue-sweetalert2/nuxt` to modules section of `nuxt.config.js`
105
109
106
110
``` js
107
111
{
108
- modules: [
109
- ' vue-sweetalert2/nuxt'
110
- ]
112
+ modules: [' vue-sweetalert2/nuxt' ];
111
113
}
112
114
```
113
115
@@ -126,6 +128,4 @@ Or pass in global options like this:
126
128
}
127
129
` ` `
128
130
129
-
130
131
## The documentation for ` sweetalert2` , you can find [here](https://sweetalert2.github.io/).
131
-
0 commit comments