Mathjax loads slow. How to load local JS file with Nuxt?

In How to render math in Vue or Nuxt?, we explain the way to use Mathjax to render beautiful math formula in Nuxt.js. However, using CDN to load Mathjax is easy, but it degrades the performance of our pages. In other words, Mathjax may load slow if it is loaded by CDN.

One of the solutions is to load Mathjax locally. You can use npm to install Mathjax to your project.

npm install mathjax@4.0.0-beta.6

However, it is difficult to integrate with Mathjax in Nuxt. Not only because there is little information about this, but following the Mathjax documentation may not work at all for Nuxt.js.

Therefore, there is only one way that is easy enough: load Mathjax's JS file locally. In other words, you continue to use CDN to load Mathjax, but load local Mathjax's JS file. Just follow the steps:

1. Download Mathjax's source files from MathJax v4.0.0-beta.6.
2. Put all the Mathjax files in the directory public/mathjax. Note that if you are using VSCode to write your Nuxt project, don't forget to see VSCode error: To enable project-wide JavaScript/TypeScript language features, exclude large folders... to avoid an important error.
3. In your nuxt.config.ts

head: {
    link: [{
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.png'
    }],
    script: [
        {
          type: "text/javascript",
          id: "MathJax-script",
          async: true,
          src: "/mathjax/tex-chtml.js",
          tagPosition: "bodyClose",
        },
        {
          innerHTML:
            "MathJax = {tex: {inlineMath: [['$', '$'],['$$', '$$']]}};",
        },

    ]
}