Vue.js Component: Vue 2 Simple Alert, Inspired by SweetAlert


A component to display easy and good looking modals, very similar & inspired by Sweetalert, is the Vue 2 Simple Alert Component.


Install it via yarn to your Vue.js project

yarn add vue2-simplert

Import Simplert from node_modules

import Simplert from 'vue2-simplert'

export default {
   components: {Simplert}

and bring the component inside your templates


To open the Simplert use a method and pass an Object Parameter

methods: {
    openSimplert () {

The object can exist within your data function

obj: {
    title: 'Opened Simplert', //  string -- title alert
    message: 'Now <b>close</b> it', // string -- message alert
    type: 'info', // string -- type : info (default), success, warning, error
    colorBtn: '#00b35e', // string -- hex color code (default: #068AC9)
    onClose: this.onClose, // function -- when close triggered
    customCloseBtnText: 'Close Simplert', //  string -- close button text
    customCloseBtnClass: 'btn btn-warning' //  string -- custom class fro button close
    // customClass: '', // string -- custom class in simplert div
    // customIconUrl: '' //  string -- custom url custom image icon

And open the Simplert

In it you can have custom icons, HTML, custom class for button & texts and more, which you can find on the wiki page of the documentation, Methods And Props.

Vue 2 Simple Alert Component (SweetAlert Inspired) By Irfan Maulana