Enhance our MathPlugin with trigonometrical functions (sine, cosine, and tangent).

Actually, it is just about adding the missing directives and using the Math object's functions in it. Open VueMathPlugin.js and add the following:

//VueMathPlugin.js
export default {
  install: function (Vue) {
    Vue.directive('square', function (el, binding) {
      el.innerHTML = Math.pow(binding.value, 2);
    });
    Vue.directive('sqrt', function (el, binding) {
      el.innerHTML = Math.sqrt(binding.value);
    });
    Vue.directive('sin', function (el, binding) {
      el.innerHTML = Math.sin(binding.value);
    });
    Vue.directive('cos', function (el, binding) {
      el.innerHTML = Math.cos(binding.value);
    });
    Vue.directive('tan', function (el, binding) {
      el.innerHTML = Math.tan(binding.value);
    });
  }
};

You can check how this directive works in the HTML file:

//index.html 
<div id="app">
  <input v-model="item"/>
  <hr>
  <div><strong>Square:</strong> <span v-square="item"></span></div>
  <div><strong>Root:</strong> <span v-sqrt="item"></span></div>
  <div><strong>Sine:</strong> <span v-sin="item"></span></div>
  <div><strong>Cosine:</strong> <span v-cos="item"></span></div>
  <div><strong>Tangent:</strong> <span v-tan="item"></span></div>
</div>

That's it!

Please combine a solution of bootstrapping the application using a SCP-compliant version of Vue.js and the simple Pomodoro application that we created in Chapter 1, Going Shopping with Vue.js. Check the code in the chrome-app-pomodoro folder.