Vue.js with Mathlive(Math equation) is not working

Question

I was trying to use Math live with Vue.js but I cannot do it. I followed every single step but it is not working I don't know why. Probably I am doing something wrong coz I am new with Vue.js.

My main.js

 import MathLive from "../node_modules/mathlive/dist/src/mathlive" 
import Mathfield from "../node_modules/mathlive/dist/src/vue-mathlive"


Vue.use(Mathfield, MathLive)

Index.vue

<mathlive-mathfield 
      id='mf' 
      ref="mathfield" 
      :config="{smartFence:false}"
      @focus="ping"
      :on-keystroke="displayKeystroke"
      v-model="formula">f(x)=</mathlive-mathfield>
      <div>
        <label>Keystroke:&nbsp;</label><kbd>{{keystroke}}</kbd>
      </div>
      <div class="output">LaTeX: {{formula}}</div> 
         <div>
             <button v-on:click="sayIt">Say It</button>
             <button v-on:click="setIt">Set It</button>
         </div>
     </div>


data(){
    return{
        formula: 'g(x)',
        keystroke: '',  
}

}

methods:{
    sayIt: function(event) {
        this.$refs.mathfield.$perform(['speak', 'all']);
    },
    setIt: function(event) {
        this.formula = 'x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}';
    },
    ping: function() {
        console.log('ping');
    },
    displayKeystroke: function(keystroke, _ev) { 
        this.keystroke = keystroke;
        return true; 
    },

}

Error is: enter image description here

https://www.npmjs.com/package/mathlive

https://github.com/arnog/mathlive/tree/master/examples/vue

https://madewithvuejs.com/mathlive-math-editor

Answer 1

Try to replace:
import MathLive from "../node_modules/mathlive/dist/src/mathlive"
import Mathfield from "../node_modules/mathlive/dist/src/vue-mathlive"
By:
import * as MathLive from "mathlive/dist/mathlive.mjs"
import Mathfield from "mathlive/dist/vue-mathlive.mjs"
Also replace :config="{smartFence:false}"
By: :options="{smartFence: true, virtualKeyboardMode: 'onfocus', fontsDirectory: 'mathlive/dist/fonts'}"