Mathematical Equations in VueJS

How to Allow Editing of Mathematical equations in VueJS?

If you want to allow your users to easily input the Mathematical Equations in your Vue app, then you are in the right place. Your users don’t need to learn the complex LaTex syntax. I used the Mathlive.io library.

The Problem in finding Math Equation Editor

When I hit this problem, I came across many mathematical equation editor’s but I wanted the solution which is clean enough to be implemented in VueJS and also easy enough to for the app users to use.

Lot of solution depend on typing in the LaTeX syntax and then they display the equation. I didn’t find it user friendly at all. If you are wondering what is LaTeX, then please check this link.

Then I found MathLive.io. This is simply amazing.

How to integrate it in VueJS?

The next challenge is how to integrate Mathlive.io in the VueJS project. They give you a VueJS example. It is good to start but it didn’t worked. Specially the CSS. I played around with various versions of this library and came with this procedure to integrate it.

Step by Step Procedure

Here are the steps you need to follow.

Step 1: Install Mathlive Dependencies

 npm i mathlive@0.27.4 --save

Please make sure you install this particular version only. As of this writing, latest version is not working.

Step 2: Import the Required Mathlive CSS

Now you need to import the CSS from Mathlive which is going to make life easier for your users.

 <link rel="stylesheet" type="text/css" href="https://unpkg.com/mathlive@0.27.4/dist/mathlive.css">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/mathlive@0.27.4/dist/mathlive.core.css">

Again, make sure that it is the same exact version or things might not work.

Step 3: Create the MathliveComponent.vue

This is your Vue component, which is basically a wrapper around Mathlive’s Javascript library.

Step 4: Import MathLiveInput and Mathlive in your component

Now, you need to use what you have setup. You need to import the Vue Component created in the last step into the component where you want to use it.

import MathLive from "mathlive";
import MathLiveInput from "./components/MathLiveInput.vue";

For simplicity, I have done it in App.vue for demo purpose.

Step 5: Initialize Mathlive

In the mounted hook of your component, you need to initialize Mathlive, so that it can render the equations if any on your component. Call renderMathInDocument function like this.

MathLive.renderMathInDocument();

Step 6: Use the MathLiveInput component

Now simply utilise the component created in step 2.

<MathLiveInput :config="config" v-model="formula" v-on:input="input()">g(x)=</MathLiveInput>

Be sure to register the component in components section or use Vue.component()

Also initialise the data fields, this will enable the keyboard for easy editing.

 formula: 'h(x)',
 config:{
      smartMode: true, 
      virtualKeyboardMode: "manual",
 }

Here is the complete code for easy reference.

Result

Here is how it looked in mobile.

The web version is also cool.

Conclusion

I used Mathlive’s npm module to import Mathlive.io functionality into the VueJS app. It allows users to edit the complex mathematical equations without any fuss.

If you find any difficulty in implementing mathematical equations in VueJS. Then please reach out to me at Twitter @MohitSehgl.

Keep Coding. Good Luck 🙂

Leave a Comment

How to Allow Editing of Mathematical equations in VueJS?

by Mohit Sehgal time to read: 2 min
0