render math equations in vue

Question

Math equations are not rendered the way it should be when fetched from database in vue. Its happening in chrome but working fine in firefox. Like this -

In chrome:

In firefox:

Through some research I found that some third party libraries are there to display math equations correctly like katex , mathjax.

But how to use them with vue or anyone willing to suggest any other libraries for vue ?

I have gone through the documentation of mathjax. But found nothing helpful for vue.

My code:

<div
              v-for="(solutions, index) in solutionsList"
              :key="index"
              class="card solutions_section_card"
              style="margin-bottom: 15px"
            >
              <a
                v-on:click="getSolution(solutions.body, solutions.description)"
                class="solutions_section_card_link click_cursor"
                v-html="solutions.body"
              >

              </a>
            </div>

Answer 1

it can be done with mathjax

first install it in your project, then copy its directory from node_module to your assets (for better accessibility) and then import one of es5 module to your component like this:

import("@/assets/mathjax/es5/tex-chtml-full.js")

and one more thing add this code to your watch or mounted hook (after you got your equation from api or something else) :

if (solutionsList) {
      if ("MathJax" in window) {
        nextTick(() => {
          window.MathJax.typeset();
        });
      }
    }

and then all of your math equation will be in pretty mode in browser