Vue MathJax for Vue 3

0.0.6 · maintenance · verified Tue Apr 21

Vue-mathjax-next is a plugin designed to integrate MathJax equation rendering into Vue 3 applications. As of its current version, 0.0.6, it provides a straightforward mechanism to use MathJax within Vue components by registering it as a global Vue plugin. This package is specifically built for Vue 3, differentiating it from the older `vue-mathjax` package, which targets Vue 2. It simplifies the setup for displaying mathematical notation (e.g., LaTeX, AsciiMath) by wrapping and handling the initialization of the MathJax 2.7 library within the Vue ecosystem. Given its `0.0.x` versioning and the last update being approximately three years ago, the project appears to be in maintenance mode with a slow release cadence, implying potential API instability and a lack of active feature development. Users should be aware of its dependency on MathJax 2.7, which is an older major version of the MathJax library.

Common errors

```
TypeError: app.use is not a function
```
cause Attempting to use `app.use()` on something that is not a Vue application instance, often due to incorrect Vue 3 setup or importing `createApp` incorrectly.

fix Ensure you are importing `createApp` from 'vue' and calling `createApp(App)` to get the application instance before calling `.use()` on it.
```
MathJax is not defined
```
cause The core MathJax library JavaScript file (MathJax.js) has not been loaded or initialized before the VueMathjax plugin attempts to use it.

fix Verify that MathJax 2.7's JavaScript file is loaded in your `index.html` via a `<script>` tag, or through another global loading mechanism, before your Vue application is mounted.
```
Equations are not rendering correctly or show raw LaTeX/AsciiMath.
```
cause This can be due to incorrect MathJax configuration, malformed mathematical syntax in your components, or conflicts with other CSS/JavaScript on the page.

fix Check the browser console for MathJax errors. Ensure your LaTeX/AsciiMath syntax is correct. Review MathJax 2.7 configuration options. Temporarily disable other scripts or styles to check for conflicts.
```
TypeError: Cannot read properties of undefined (reading 'install')
```
cause This error often occurs when `app.use()` is called with an argument that is not a valid Vue plugin object. This typically happens if `VueMathjax` was imported incorrectly (e.g., as a named import instead of a default import).

fix Change your import statement for `VueMathjax` to `import VueMathjax from 'vue-mathjax-next';` to ensure you are importing the default export.

Warnings

breaking This package is strictly for Vue 3 applications and is not compatible with Vue 2. Users on Vue 2 should use the `vue-mathjax` package instead.
Fix: For Vue 2 projects, install `vue-mathjax`. For Vue 3, ensure you are not attempting to use `vue-mathjax-next` in a Vue 2 context.
breaking Vue-mathjax-next explicitly targets MathJax version 2.7. It is not compatible with MathJax 3.x or newer versions, meaning newer MathJax features or configurations might not work.
Fix: Ensure your project uses MathJax 2.7 if configuring it manually, or stick to the default MathJax 2.7 setup provided by the plugin. Avoid upgrading MathJax independently.
gotcha The package is in a 0.0.x version range and has not been updated in approximately three years. This indicates a lack of active development and potential instability, including unaddressed bugs or security vulnerabilities.
Fix: Pin the exact version (`0.0.6`) in your `package.json` to prevent unexpected changes if new unstable versions were to be released. Consider alternative, more actively maintained MathJax integrations for Vue if long-term support and stability are critical.
gotcha Similar to its Vue 2 predecessor, `vue-mathjax-next` might expect MathJax.js to be explicitly included in your project (e.g., via a CDN script tag) rather than bundling it directly, which can lead to rendering issues if not handled.
Fix: If equations are not rendering, verify that MathJax.js (specifically version 2.7) is loaded in your `index.html` or through a compatible method before the Vue app mounts.

Install

npm install vue-mathjax-next npm
yarn add vue-mathjax-next yarn
pnpm add vue-mathjax-next pnpm

Imports

VueMathjax

wrong:

import { VueMathjax } from 'vue-mathjax-next';

correct:

import VueMathjax from 'vue-mathjax-next';

The plugin is exported as a default export, not a named export.

createApp
wrong:
```
const createApp = require('vue').createApp;
```
correct:
```
import { createApp } from 'vue';
```
Vue 3 applications are typically set up using ESM imports for `createApp`.

Quickstart

Registers the VueMathjax plugin globally for use in a Vue 3 application, enabling MathJax rendering capabilities throughout.

import { createApp } from 'vue'
import VueMathjax from 'vue-mathjax-next';
import App from './App.vue'

const app = createApp(App)
app.use(VueMathjax)

app.mount('#app')

view raw JSON →