[Vuejs]-LaTeX rendering with MathJax

by

1👍

✅

Based on a comment in the [related repo for the Vue2] version, it looks like you need to include the MathJax script, as the component doesn’t load it itself.

In Nuxt 3, you can place a script in your component using the <Script> tag instead of <script>. [ref]

Please note that the Script component has been deprecated as of Nuxt 3.0.0-rc.14 and the suggested method is now useHead

https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.14

Updating your vue file to this should do the trick:

<template>
  <div>
    <textarea v-model="formula"/>
    <vue-mathjax :formula="formula"/>
  </div>
  <Script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></Script>
</template>

<script setup lang="ts">
const formula = ref('$$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$');
</script>
👤Niko Chaffin

Leave a comment