Update to work with Vue 3.

[hsorby]

I have made changes so that I can use this with Vue 3. I hope you don't mind but I published a namespaced version (@hsorby/vue3-katex) so that I can use it now. Happy to make further changes to this PR to bring it more inline with existing codebase, otherwise it will serve as a place for people to (maybe) find out that there is a Vue 3 option available.

[tobiasdiez]

@lucpotage would be nice if this PR could be merged!

[lucpotage]

Hi @tobiasdiez, Thanks for the PR, I spent some time to read it and I'm almost ready to merge it. Could you please keep the original name (vue-katex), repository URL, and add your name in the list of contributors in package.json?

[tobiasdiez]

Nice! Btw the PR the nice work of @hsorby, I'm just a bystander that would like to see the vue 3 support ;-)

[Visgaard]

I'm also just a bystander looking to use KaTeX with vue3. This plug-in works perfectly, thanks.

[aguirremac]

Hi @hsorby, I'm using your unmerge PR (@hsorby/vue3-katex). Do you know how can we add extensions for this package like mhchem support?

I tried adding the cdn as stated here: https://github.com/KaTeX/KaTeX/blob/main/contrib/mhchem/README.md but it doesn't seem to work.

[hsorby]

Hi @hsorby, I'm using your unmerge PR (@hsorby/vue3-katex). Do you know how can we add extensions for this package like mhchem support?

I have added an option to the package to enable mhchem support, you will need to upgrade to 0.6.0-rc.6 for this though. When you use the package add the option { mhchem: true } and you should have mhchem support. I have only given this the bare minimum of testing and it worked for me (tm). If it doesn't work for you show us the error and I'll have a go at fixing it. Check the README I added some documentation there.

[aguirremac]

Hi @hsorby, thank you for your response. Unfortunately, it's still not working for me.

Here's my plugin btw. I'm using it in Nuxt3.

import 'katex/dist/katex.min.css'

import VueKatex from '@hsorby/vue3-katex'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueKatex, {
    mhchem: true,
    globalOptions: {
      delimiters: [
        { left: '$$', right: '$$', display: true },
        { left: '$', right: '$', display: false },
        { left: '\begin{equation}', right: 'end{equation}', display: true },
        { left: '\begin{align}', right: 'end{align}', display: true }
      ]
    }
  })
})

Here's the error on console.

chunk-4OF65L5M.js:1565 KaTeX auto-render: Failed to parse \ce{NaCl, KBr} with ParseError: KaTeX parse error: Undefined control sequence: \ce at position 1: \̲c̲e̲{NaCl, KBr} at new ParseError2 (katex.js:107:14) at Parser2.parseGroup (katex.js:18346:17) at Parser2.parseAtom (katex.js:17781:21) at Parser2.parseExpression (katex.js:17643:23) at Parser2.parse (katex.js:17575:24) at parseTree2 (katex.js:18583:21)

[hsorby]

I tried a simple example with Nuxt3 (available here). And I got this result:

I would need to see more of your setup to get any further with your particular issue. I did release another version 0.6.0-rc.7 to clear an error when loading the mchem module, I assume there was some searching of an appropriate library happening in the background. 0.6.0-rc.6 did work for me but an error was reported in the console which I think 0.6.0-rc.7 fixes.

[aguirremac]

..

[aguirremac]

Hi @hsorby, if I do this in my app, it works with

<p>This is a chemical reaction: <span v-katex="'\\ce{CO2 + C -> 2 CO}'"></span>!</p>

The problem is that I'm rendering HTML data from an API, and it includes mhchem/LaTeX characters using v-html. It doesn't auto-render them using v-katex:auto, unlike for the mathematical characters. So what I need is for something like this to work.

<span v-katex:auto v-html="'This is a chemical reaction: \\ce{CO2 + C -> 2 CO}'"></span>