Vuejs-Vue swal: vue-swal - A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR)

VueSwal

npm (scoped with tag) vue2 npm donate

You can customize VueSwal to fit your needs.

Api sweetalert or Examples

Installation

npm

npm install vue-swal

yarn

yarn add vue-swal

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueSwal from 'vue-swal'

Vue.use(VueSwal)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-swal/dist/vue-swal.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/vue-swal"></script>

Simply happens

export default {
  methods: {
    alert() {
      this.$swal('Hello word!')
    }
  }
}

Examples

Basic Example Advanced Example
basic example advanced example

Using Nuxt.js

Using the plugin with nuxt is really very simple.

Add file plugins/vue-swal.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:

module.exports = {
  plugins: ['~/plugins/vue-swal']
}

To learn more about the plugins configuration key, check out the plugins api.

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:

module.exports = {
  build: {
    vendor: ['vue-swal']
  },
  plugins: ['~/plugins/vue-swal']
}

Click here to see a complete example.

License

MIT

Comments

  • Unable to display vue components withing swal
    Unable to display vue components withing swal

    Jan 1, 2018

    I have a component for modifying user information, sway if i do something like this.$swal({ title: 'Edit user', html: '<user-component></user-component>' }) The body turns out to be blank

    Reply
  • Object.assign is not a function
    Object.assign is not a function

    Aug 3, 2018

    On old android devices, this function is not supported and thus, it brakes everything. Tested on stock browser for android 5.1.1 on galaxy nexus (using simulator)

    Reply
  • Adding custom html attributes to the alert elements
    Adding custom html attributes to the alert elements

    Mar 2, 2020

    Is there a way to add custom html attributes to the input? For example, to restrict the number of characters through maxlength

    Reply
  • how to set something on click
    how to set something on click "ok"

    Apr 10, 2020

    how to set some action, when user click ok ?

    Reply
  • "swal-button--confirm" overrides "swal-button--danger"

    Nov 4, 2019

    The generated code have the two classes at the same time. image

    I assigned true to dangerMode in the code.

    image

    Is this an expected behavior?

    Thanks.

    Reply
  • access with Vue.$swal
    access with Vue.$swal

    Jul 27, 2018

    is it possible to access with Vue.$swal instead of this.$swal ? I need Vue.$swal because I wanna use it outside a component, in an interceptor for axios.

    Reply
  • HTML Support
    HTML Support

    Feb 17, 2018

    Hello, I am using the html: 'htmlCode Bold' parameter like this but its giving a blank. how to use, html parameter.

    Big regards

    Reply
  • How do we integrate with NuxtJS?
    How do we integrate with NuxtJS?

    Oct 5, 2017

    How do we integrate with NuxtJS?

    Reply