Wenn du in Vue 3 mathematische Formeln mit LaTeX darstellen möchtest, ist MathJax die ideale Lösung. Mit diesem Ansatz kannst du sowohl statische als auch dynamische Inhalte rendern.

1. MathJax einbinden

Zuerst musst du MathJax in dein Projekt einbinden, zum Beispiel über ein CDN in der HTML-Datei:

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

2. Vue 3 App mit MathJax

Die folgende Vue 3 Komponente zeigt, wie du MathJax in einer Vue-App verwenden kannst. Dabei wird jede Formel gerendert, sobald die Komponente gemountet oder aktualisiert wird:

<div id="app">
  <p>Hier ist eine Formel: \(E = mc^2\)</p>
</div>

<script type="module">

  import { createApp, ref, onMounted, onUpdated } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

  const app = createApp({
    setup() {

      const renderMath = () => {

        if (window.MathJax) {

          window.MathJax.typesetPromise();

        }

      };

      onMounted(renderMath);
      onUpdated(renderMath);

      return { wsg_1080 }

    }
  });

  app.mount('#app');

</script>

3. Erklärung

• onMounted(renderMath) sorgt dafür, dass MathJax die Formeln beim ersten Rendern verarbeitet.
• onUpdated(renderMath) stellt sicher, dass auch dynamisch geänderte Inhalte korrekt gerendert werden.
• window.MathJax.typesetPromise() rendert alle LaTeX-Formeln auf der Seite.

Mit dieser Methode kannst du LaTeX-Formeln überall in deiner Vue-App verwenden, egal ob statisch oder dynamisch.