https://github.com/anteriovieira/vue-swal

A small wrapper for integrating SweetAlert to Vuejs
https://github.com/anteriovieira/vue-swal

sweetalert vue-plugin vue-swal vuejs

Last synced: 8 months ago
JSON representation

A small wrapper for integrating SweetAlert to Vuejs

• Host: GitHub
• URL: https://github.com/anteriovieira/vue-swal
• Owner: anteriovieira
• License: mit
• Created: 2017-10-03T23:41:02.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-11-20T23:41:18.000Z (about 7 years ago)
• Last Synced: 2025-03-31T04:07:20.000Z (8 months ago)
• Topics: sweetalert, vue-plugin, vue-swal, vuejs
• Language: JavaScript
• Homepage:
• Size: 334 KB
• Stars: 189
• Watchers: 1
• Forks: 17
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-zh - Vue-SwaI位 - 用于将SweetAlert与Vuejs集成的小包装器. (与SSR兼容) (UI组件 / 覆盖)
• awesome-vue - vue-swal - A small wrapper for integrating SweetAlert to Vuejs ` 📝 3 years ago` (UI Components [🔝](#readme))
• awesome-vue - vue-swal ★92 - A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR) (UI Components / Overlay)
• awesome-vue - vue-swal - A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR) (Components & Libraries / UI Components)
• awesome-vue - vue-swal - A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR) (UI Components / Overlay)

README

          
# VueSwal

[![npm (scoped with tag)](https://img.shields.io/npm/v/vue-swal/latest.svg?style=flat-square)](https://npmjs.com/package/vue-swal)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

[![npm](https://img.shields.io/npm/dt/vue-swal.svg?style=flat-square)](https://npmjs.com/package/vue-swal)

[![donate](https://img.shields.io/badge/donate-%E2%99%A5-ff5f5f.svg)](https://patreon.com/anteriovieira)

> You can customize VueSwal to fit your needs.



  





  Api sweetalert or 

  Examples



## Installation

### npm

```bash

npm install vue-swal

```

### yarn

```bash

yarn add vue-swal

```

## Usage

### Bundler (Webpack, Rollup)

```js

import Vue from 'vue'

import VueSwal from 'vue-swal'

Vue.use(VueSwal)

```

### Browser

```html

```

### Simply happens

```js

export default {

  methods: {

    alert() {

      this.$swal('Hello word!')

    }

  }

}

```

## Examples

|[Basic Example](https://jsfiddle.net/anteriovieira/xkkbfL3L/1800) | [Advanced Example](https://jsfiddle.net/anteriovieira/8nawdjs7) |

|--------|-------------|

|![basic example](https://raw.githubusercontent.com/anteriovieira/vue-swal/master/media/basic-example.gif#1) | ![advanced example](https://raw.githubusercontent.com/anteriovieira/vue-swal/master/media/advanced-example.gif#1)

## Using Nuxt.js

Using the plugin with nuxt is really very simple.

Add file `plugins/vue-swal.js`:

```js

import Vue from 'vue'

import VueSwal from 'vue-swal'

Vue.use(VueSwal)

```

Then, we add the file inside the `plugins` key of `nuxt.config.js`:

```js

module.exports = {

  plugins: ['~/plugins/vue-swal']

}

```

> To learn more about the `plugins` configuration key, check out the [plugins api](/api/configuration-plugins).

The, `vue-swal` will be included in the app bundle, but because it's a library, we want to include it in the vendor bundle for better caching.

We can update our `nuxt.config.js` to add `vue-swal` in the vendor bundle:

```js

module.exports = {

  build: {

    vendor: ['vue-swal']

  },

  plugins: ['~/plugins/vue-swal']

}

```

Click [here](https://github.com/anteriovieira/vue-swal-ssr-app) to see a complete example.

## License

[MIT](http://opensource.org/licenses/MIT)