CODEWITHSUNDEEP
javascriptvue.js
vkubicki
vkubicki

Reputation: 1124

External javascript from public/index.html not loading in Vue component

I want to use Mathjax on my website. I put in the <head> section of public/index.html:

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

And, in my component :

<template>
    <div v-html="note_content"></div>
</template>

<script>
import { typeset, dummy_typeset } from '../assets/js/text_processing.js';
import showdown from 'showdown';

const converter = new showdown.Converter({ tables: true });

export default {
    data () {
        return {
        }
    },
    computed: {
        note_content: function() {
            return typeset(this.exchange_data);
        }
    },
    props: ['exchange_data'],
    watch: {
        note_content: function() {
            Mathjax.typesetPromise();
        }
    }
}
</script>

However on runtime, I get the error :

Uncaught (in promise) ReferenceError: Mathjax is not defined

What I do not understand is that the css which is located in the head of public/index.html is correctly loaded and rendered in the component. Also I read elsewhere that loading external javascript this way should make it available to all components. What is wrong ?

Upvotes: 1

Views: 1778

Answers (2)

vkubicki
vkubicki

Reputation: 1124

Contrarily to what is written at https://docs.mathjax.org/en/latest/web/typeset.html, the syntax for asynchronous rendering is not :

Mathjax.typesetPromise()

But (notice the case):

MathJax.typesetPromise()

The typo could be detected from the surrounding context.

Also not that to use typeset Mathjax in a Vue component, the virtual DOM should be processed before calling the typesetPromise method, so an example of working code would be:

watch: {
    note_content: function() {
        this.$nextTick(MathJax.typesetPromise);
    }
}

Upvotes: 0

turkishpeter
turkishpeter

Reputation: 54

I think it is connected to webpack config, but i might be wrong. Anyway, have you tried this method?

How to add external JS scripts to VueJS Components?

It enforces the script to be loaded.

Upvotes: 1

Related Questions