npm

Need private packages and team management tools?Check out npm Orgs. »

swal-vue

1.0.4 • Public • Published

swal-vue

Vue.js wrapper for SweetAlert2.


Get started

yarn add swal-vue
// main.js
import Vue from 'vue';
import SwalVue from 'swal-vue';
 
Vue.use(SwalVue);

Now you can use SweetAlert2 in your Vue project sweetalert2.

// vue-component.vue
<template>
    <button @click="showAlert">Hello world</button>
    <button @click="showAlertWithComponent('hello')">Hello world, again</button>
    <button @click="showAlertWithComponent2('hello')">Hello world, another time</button>
</template>
 
<script>
import anotherVueComponent from 'another-vue-component.vue'
 
export default {
    methods: {
        showAlert(){
            // Use sweetalert2
            this.$swal.fire({
                type: 'success',
                title: 'Hello world',
                text: 'hi from swal-vue',
            })
        },
        /**
         * include a Vue component in the modal
         */
        showAlertWithComponent(message){
            // Use sweetalert2
            this.$swal.fire({
                type: 'success',
                title: 'Hello world',
                text: 'hi from swal-vue',
                component: anotherVueComponent,
                componentArgs: {propsData: {msg: message}}
            })
            // if you need access to the component
            const component = this.$swal.getComponent()
        },
        /**
         * another way to include a Vue component in the modal
         */
        showAlertWithComponent2(message){
            // Use sweetalert2
            this.$swal.fire({
                type: 'success',
                title: 'Hello world',
                text: 'hi from swal-vue',
            })
            this.$swal.addVueComponent(anotherVueComponent, {propsData: {msg: message}})
            // if you need access to the component
            const component = this.$swal.getComponent()
        }
    }
}
</script> 

// Or

Vue.$swal('Hello world!');

sweetalert2 documentation

install

npm i swal-vue

Downloadsweekly downloads

8

version

1.0.4

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability