DRY your code with Vue.js

DRY also stands for Don't Repeat Yourself, which is a popular phrase for Ruby on Rails developer, which means that you should not repeat your code more than once.

In Vue.js, with the power of Mixins and Directive, these can be achieved easily.

Mixins

Mixins are just like sass mixins, it can save you from writing bunch of codes.

const clickMixin = Vue.mixin({
  methods: {
    triggerClick: function() {
      this.data = `Hello ${Math.random()}!`
    }
  }
})

Something like this can be shared across multiple components by simply use it by using mixins and pass it as an array.

mixins: [clickMixin]

Do becareful about the lifecycle of mixins when being used, mixins' lifecycle will run before the component's lifecycle kicks in.

Directives

Directive is use for DOM element.

Vue.directive("green", function(el) {
  el.style.color = "green";
});

by using it in html, you simply add in v-green into your div, and you can get a green color text.

<h1 v-green v-on:click="triggerClick">{{data}}</h1>

Checkout sample at Codepen

https://codepen.io/superoo7/pen/ReMxRX