How to use mathjax with vue.js 2? - vue.js

Question

My package.json:
"dependencies": {
"bootstrap": "^3.3.7",
"mathjax": "^2.7.2",
"vue": "^2.5.2",
"vue-moment": "^3.1.0",
"vue-router": "^3.0.1"
},
I have a component:
<template>
<div class="post--body" v-html="previewText" id="post--body"></div>
</template>
<script>
import MathJax from 'mathjax'
export default {
name: 'blog-post',
data () {
return {
post: {body: ""}
}
},
mounted() {
fetch("/api/post/" + this.$route.params.id)
.then(response => response.json())
.then(data => {
this.post = data;
})
this.$nextTick(function () {
console.log("tick")
MathJax.Hub.Typeset()
})
},
computed: {
previewText () {
return this.post.body
}
}
}
</script>
But I got "Uncaught SyntaxError: Unexpected token <" on MathMenu.js?V=2.7.2:1
How to properly use mathjax?

Answer 1

I don't think you can import mathjax, because if I console log imported mathjax , it shows empty object. I have gone through the folder directory also that doesn't seem importable. So you need to manually put the script src pointing to Mathjax.js
The way I currently use Mathjax in vue is by making a custom global component.
<template>
<span ref="mathJaxEl" v-html="data" class="e-mathjax"></span>
</template>
<script type="text/javascript">
export default{
props:['data'],
watch:{
'window.MathJax'(val){
this.renderMathJax()
},
'data'(val){
this.renderMathJax()
}
},
mounted(){
this.renderMathJax()
},
methods:{
renderMathJax(){
if(window.MathJax){
window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub,this.$refs.mathJaxEl]);
}
}
}
}
</script>
It can be made a bit better by using a variable to save boolean whether, mathjax has been rendered or not, as rendering gets called for two watch values, which both may get triggered in case of browser refresh.

Answer 2

So for MathJax v3, just add the following to your vue component
mounted(){
MathJax.typeset();
},
Now when navigating to pages via Vue router the math will render on component mount.