VueSwal

A Vue.js Plugin

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-swal"></script>
<div id="app">
  <job></job>
</div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background-color: #42b983;
  cursor: pointer;
  color: #fff;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  border-radius: 4px;
}

JavaScript

Vue.component('job', {
  template: '<button class="btn" @click="test">Click me!</button>',
  data() {
  	return {
    	probe: "asdfasdfasdf"
    }
  },
  methods: {
    test() {
      this.$swal("Write something here:").then(value => {
        this.$swal(`You typed: ${this.$data.probe}`)
      })
    }
  }
});

// create a new Vue instance and mount it to our
// div element above with the id of app
var vm = new Vue({
  el: '#app'
});