Skip to content

Commit

Permalink
* Reformat instructions
Browse files Browse the repository at this point in the history
* Add the 'includeCss: false' instructions for custom styling
  • Loading branch information
vincentdh committed Jul 8, 2019
1 parent da55499 commit 7925059
Showing 1 changed file with 38 additions and 25 deletions.
63 changes: 38 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Vue.js wrapper for SweetAlert2. With support SSR.

## Get started


### Basics
```bash
npm install -S vue-sweetalert2
```
Expand All @@ -31,9 +31,32 @@ import 'sweetalert2/dist/sweetalert2.min.css';
Vue.use(VueSweetalert2);
```


Now in the global object, you can access all the methods of [sweetalert2](https://github.com/limonte/sweetalert2).

```html
// 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
```js
Vue.swal('Hello Vue world!!!');
```

### Global options
If you want to add global options like button colors, do something like this:
```js
// main.js
Expand All @@ -47,8 +70,20 @@ const options = {

Vue.use(VueSweetalert2, options)
```

### Custom styling
Using scss styles are loaded so
```js
// main.js
import Vue from 'vue';
import VueSweetalert2 from 'vue-sweetalert2';

const options = {
includeCss: false
}

Vue.use(VueSweetalert2, options)
```

```scss
// style.scss
@import '~sweetalert2/src/variables';
Expand All @@ -61,28 +96,6 @@ $swal2-background: #990000;



```html
// 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
```js
Vue.swal('Hello Vue world!!!');
```

## Nuxt.js

Expand Down

0 comments on commit 7925059

Please sign in to comment.