Basic VueJs Component

Defining and using a component - http://coligo.io

by Antério Vieira

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script src="https://unpkg.com/vue-swal"></script>
<div id="app">
  <job></job>
</div>

CSS

.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  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>',
  methods: {
    test() {
      this.$swal("Good job!", "You are ready to start!", "success")
    }
  }
});

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