Vue2-Simplert — SweetAlert Alternative for VueJs

Vue2-Simplert Demo Page (source : vuejsfeed.com)

SweetAlert is very popular library and become very mainstream for developer when need to show some information with popup alert style. Vue.js is javascript framework created by Evan You that also become very popular in the last year.

I glad to have my time to join with team that develop new site using Vue.js in my company. Yes, Vue.js is awesome, but there is a thing that make orthodox Front End developer like me feel hard to craft my interface using Vue.js. One of them is availability for fit components to our need. Vue.js is growing bigger every day and also for components availability that going better every day, you can found vue component for carousel, datepicker, maps, chart, etc. Many thanks for awesome-vue for listing all these cool components in one repository, so we just see this repo and gotcha we found alternative component for build our interface.

Sadly, for some case we haven’t found our need in awesome-vue and the best solution is create our own component that fit with our need. SweetAlert is one our loving library that develop using ES6 vanilla, they have public cool repository that we can learn easily because modular code with ES6 module system that increase readability. But we need a lighter than original SweetAlert and we need Alert with more Vue than the original one. So I started to create my own simple repository to show popup alert like SweetAlert done with Vue 2.

I called it : Vue2-Simplert
Vue2-Simplert Logo

Vue2-Simplert is available in npm, yarn and CDN, you can quick download from these two repository with easy command like :

Install via NPM:

Install via npm

Install via Yarn:

Install via Yarn

Install via CDN :

Include Vue2-Simplert script via CDN

If you using NPM or Yarn : after installation, you need to import Vue2-Simplert dependency and refer in your component, example :

Vue2-Simplert Import

But if you are using CDN for include Vue2-Simplert you can skip the step above.

For using Vue2-Simplert you can using template with very ease, just add below snippet:

Vue2-Simplert Template

Then open your popup alert with call method openSimplert(), example:

Call openSimplert method via $refs

Vue2-Simplert have configuration that you can setup for your Alert behavior and styling, below image is available configuration in Vue2-Simplert :

You can call methods in Vue2-Simplert with using $refs that you set in HTML snippet template, here the list of available methods :