KaTeX with Vue 3

20 Jan 2022

Trying out Vue 3 with KaTeX^[1]. Heavily inspired by vue-katex^[2] for Vue 2.

testing vue with katex with some inline math like and a block:

Slider example: should update the expression reactively

Proof of concept code, assuming Vue and KaTeX are loaded from CDN:

const app = Vue.createApp({data() { return {x: 3}; }});

app.component('katex-span', {
    props: ['expr'],
    computed: { math() { return katex.renderToString(this.expr); }, },
    render() { return Vue.h('span', {innerHTML: this.math}); },
});

app.component('katex-div', {
    props: ['expr'],
    computed: { math() { return katex.renderToString(this.expr); }, },
    render() { return Vue.h('div', {innerHTML: this.math}); },
});

app.mount('#vue-test');

Endnotes