推奨：2番目の方法を紹介しています。1番目はCDNを使用して企业内部環境では利用できなくなります。

方法1：MathJax 2.7.5（CDN読み込み）

この方法は推奨しません。企业内部ネットワークでは外部CDNにアクセスできないためです。

1.index.htmlにCDNを追加

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

2.mathjax.jsユーティリティファイル

// MathJax設定モジュール

let configApplied = false;

const setupMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
    showProcessingMessages: false,
    messageStyle: "none",
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"],
      ],
      displayMath: [
        ["$$", "$$"],
        ["\\[", "\\]"],
      ],
      skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"],
    },
    "HTML-CSS": {
      availableFonts: ["STIX", "TeX"],
      showMathMenu: false,
    },
  });
  configApplied = true;
};

const renderMathContent = function (targetElement) {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Queue([
    "Typeset",
    window.MathJax.Hub,
    document.getElementsByClassName(targetElement),
  ]);
  window.MathJax.Hub.Queue([
    "Typeset",
    window.MathJax.Hub,
    document.getElementById(targetElement),
  ]);
};

export default {
  configApplied,
  setupMathjaxConfig,
  renderMathContent,
};

3.main.jsでインポート

import mathJax from "./utils/mathJax";

Vue.prototype.mathJax = mathJax;

4.MathRendererコンポーネント

<template>
  <div class="mathContainer" v-html="'$$'+formula+'$$'" />
</template>

<script>
import mathJax from '@/utils/mathJax.js'

export default {
  name: 'MathRenderer',
  props: { 
    formula: { type: String, default: '' } 
  },
  watch: {
    formula() {
      this.renderEquation()
    },
  },
  mounted() {
    this.renderEquation()
  },
  methods: {
    renderEquation() {
      this.$nextTick(function () {
        if (!mathJax.configApplied) {
          mathJax.setupMathjaxConfig()
        }
        mathJax.renderMathContent('mathContainer')
      })
    },
  },
}
</script>

<style>
.mjx-chtml {
  margin: 0 !important;
}
</style>

5.使用方法

<template>
    <div>
      一元二次方程式 \(ax^2 + bx + c = 0\) の解は \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \) です
    </div>
    <div class="flex-item">
      <MathRenderer :formula="sampleFormula" />
    </div>
</template>

<script>
import MathRenderer from '@/components/MathRenderer.vue'

export default {
  components: {
    MathRenderer,
  },
  data(){
    return{        
      sampleFormula: 'P_{推定} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C',
    }
  }
}
</script>

方法2：MathJax 3.2.2（ローカルインストール）【推奨】

1.インストール

npm install mathjax@3

2.ファイル配置

node_modules/mathjax/es5フォルダをsrc/assets/mathjax/es5としてコピーします。インストール後はnode_modulesのmathjaxを削除してかまいません。

3.mathjax.jsユーティリティファイル

let configApplied = false;

const setupMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax = {
    tex: {
      inlineMath: [
        ["$", "$"],
        ["\\(", "\\)"],
      ],
      displayMath: [
        ["$$", "$$"],
        ["\\[", "\\]"],
      ],
    },
    options: {
      skipHtmlTags: [
        "script",
        "noscript",
        "style",
        "textarea",
        "pre",
        "code",
        "a",
      ],
      ignoreHtmlClass: "tex2jax_ignore",
      processHtmlClass: "tex2jax_process",
    },
  };
  configApplied = true;
};

const renderMathPromise = async function () {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.startup.promise = window.MathJax.startup.promise
    .then(() => {
      return window.MathJax.typesetPromise();
    })
    .catch((err) => console.error("レンダリングエラー: " + err.message));
  return window.MathJax.startup.promise;
};

export default {
  configApplied,
  setupMathjaxConfig,
  renderMathPromise,
};

4.main.jsでインポート

import mathJax from "./utils/mathJax";

Vue.prototype.mathJax = mathJax;

5.MathRendererコンポーネント

<template>
  <div class="mathContainer" v-html="'$$'+formula+'$$'" />
</template>

<script>
import mathJax from '@/utils/mathJax.js'

export default {
  name: 'MathRenderer',
  props: { 
    formula: { type: String, default: '' } 
  },
  watch: {
    formula() {
      this.renderEquation()
    },
  },
  mounted() {
    this.renderEquation()
  },
  methods: {
    async renderEquation() {
      if (!mathJax.configApplied) {
        mathJax.setupMathjaxConfig()
      }
      await mathJax.renderMathPromise()
    },
  },
}
</script>

<style>
.mjx-chtml {
  margin: 0 !important;
}
</style>

6.ページでの使用方法

<template>
    <div>
      一元二次方程式 \(ax^2 + bx + c = 0\) の解は \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \) です
    </div>
    <div>{{ sampleFormula }}</div>
    <div>
      一元二次方程式 \(ax^2 + bx + c = 0\) の解は \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \) です
    </div>
</template>

<script>
import '@/assets/mathjax/es5/tex-mml-chtml'

export default {
  data(){
    return{        
      sampleFormula: 'P_{推定} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C',
    }
  },
  mounted() {
    if (!this.mathJax.configApplied) {
      this.mathJax.setupMathjaxConfig()
    }
    this.mathJax.renderMathPromise()
  },
  updated() {
    if (!this.mathJax.configApplied) {
      this.mathJax.setupMathjaxConfig()
    }
    this.mathJax.renderMathPromise()
  },
}
</script>