A small wrapper for integrating SweetAlert to Vuejs

A small wrapper for integrating SweetAlert to Vuejs
A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR). You can customize VueSwal to fit your needs.import VueSwal from 'vue-swal'

VueSwal

Installation

npm

source-shell
npm install vue-swal

yarn

source-shell
yarn add vue-swal

Usage

Bundler (Webpack, Rollup)

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

Vue.use(VueSwal)

Browser

text-html-basic
<!-- 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

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

Examples

This is image title

Using Nuxt.js

Using the plugin with nuxt is really very simple.

Add file plugins/vue-swal.js:

source-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:

source-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:

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

Click here to see a complete example.

GitHub

anteriovieira/vue-swal

Suggest:

JavaScript Programming Tutorial Full Course for Beginners

Learn JavaScript - Become a Zero to Hero

Top 10 JavaScript Questions

E-Commerce JavaScript Tutorial - Shopping Cart from Scratch

JavaScript Substring Method in 5 Minutes

Javascript Project Tutorial: Budget App