Vue MathJax Editor

reference https://vuejs.org/v2/examples/index.html

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<div id="editor">
  <textarea v-model="input"></textarea>
  <div v-html="output" id="editor-output"></div>
</div>

CSS

html, body, #editor {
  height: 100%;
}

textarea {
  width: 80%;
  height: 30%;
}

#editor div {
  padding: 20px;
}

JavaScript

new Vue({
  el: '#editor',
  data: {
    input: '',
    output: ''
  },
  created: function () {
    this.input = '{\\sqrt{2}^\\sqrt{2}}^\\sqrt{2} = 2 \\\\ \\sqrt{2}^{2\\log_{2}{3}} = 3'
  },
  watch: {
    input: _.debounce(function(e) {
      //this.output = '\\(' + this.input + '\\)'
      this.$nextTick(function() {
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"editor-output"])
      })
    }, 300)
  }
})