Vue 3 ready?

[e3d]

The sample code seems to be for Vue 2. Can I possibly use it in Vue 3? Thanks for suggestions.

[superdiazzz]

Wish owner answer this

[arnog]

Unfortunately I'm not familiar with Vue 3 and I don't have the time to learn it right now, but if someone would submit a PR, I'd be happy to merge it.

That said, note that in the current version of MathLive, a mathfield is just a <math-field> custom element, so I'm not sure that a wrapper is even necessary, or at least no more necessary than what you would do for another standard DOM element.

[tobychidi-zz]

Honestly, this was not well documented. I am having a hard time setting this up. Vue 3.

The imports don't even seem to work. The example had to be from CDN? Such good promise for this library. I will keep searching.

[ViridityCorn]

@tobychidi Did you manage to implement Mathlive in Vue 3? I'm currently having the same problem, and I'm not quite sure how to get it to work...

[tobychidi-zz]

@ViridityCorn Oh My! I did. I actually integrated it into an editor and it works so well.

Here are the steps:

1. Install Mathlive

2. Vite Config ->Compiler options -> isCustomElement: (tag) => tag.includes('math-field')

3.   import { MathfieldElement } from "mathlive";
     import "mathlive/dist/mathlive-fonts.css";
     import "mathlive/dist/mathlive";
   

4.  <math-field class="mathField" keypress-sound="null" plonk-sound="null" ref="mathField"
    @input="handleInput"></math-field>
   

5. The sound attributes were muted due to faulty imports and I was not using the keyboard anyways... We can also easily build a better one.

6. const mathField = ref<MathfieldElement>(); Now you can access mathField programmatically

7. Enjoy! I think I detailed everything.

[arnog]

Thanks @tobychidi for the detailed information.

[ViridityCorn]

So many thanks @tobychidi ! I've tried to get this to work for quite some time now without luck, but your solution just works! Many many thanks! I haven't quite figured out where to define mathField to access it programmatically though 😅

It also looks like quite an interesting project, you've been working on! I too am trying to implement it in an editor actually!

[tobychidi-zz]

@ViridityCorn accessing mathField in your script... You can simply use refs. The usual ref special attribute. It's value would be the name as your ref variable based on script setup syntax.

[ViridityCorn]

@tobychidi Thanks, of course! I was just fumbling around with the ref, so it just returned undefined. I figured it out though!

[huongphamx]

@tobychidi-zz Hi Toby, when I import "mathlive/dist/mathlive-fonts.css"; and "mathlive/dist/mathlive"; like you mentioned with Vite, it keep saying that Internal server error: Missing "./dist/mathlive-fonts.css" specifier in "mathlive" package. Did you face that?

[arnog]

@hwynand you do not need to import this CSS file, you can just skip that.

[huongphamx]

Hi @arnog , thanks for your great works. Unfortunately the import error happened with math/dist/mathlive too, I'm using nuxt 3 and tried with Vue 3. I'll try to find some workarounds.

[ccsalazard]

Hi @huongphamx, were you able to solve the error? I just ran into the same thing.

[eokwukwe]

@tobychidi-zz do you mind sharing your code snippet? I am getting the same issue as @huongphamx

[hsellik]

@arnog , firstly, thanks for the awesome work with this wonderful library!

Looking at Stack Overflow and GitHub, it seems that quite a lot of people are having hard time setting this project up with vite and Vue. The reality is, that majority of people want to set it up with an npm package and documentation for this is not clear at the moment.

Would it be possible to get some pointers on how it's intended to be used with npm and Vue?

[arnog]

Unfortunately, I am far from an expert in Vue and Vite. It would be great if someone from the community with more expertise than I have could contribute some instructions. FYI, someone has recently filed an issue that may contain useful information. I would appreciate it if you could have a look at it, and let me know if this is something that you find useful and that I should consider integrating into the documentation: https://github.com/arnog/mathlive/issues/2191

[hsellik]

Thanks for the pointer! For some reason, I get an error, but it might be Vue / my project specific. I'll try to solve it or create a minimalistic reproduction.

TypeError: Illegal constructor
    at new _MathfieldElement2 (mathlive.js:38655:5)

I think that if we have a solid guide for getting it to work with npm, then the community can follow up on the Vue/React/Angular/Svelte/... implementations. What people are doing, is using the "plain javascript" version to load the MathLive in their framework-specific lifecycle hook, when the component has been loaded.

I do advise on putting the "plain javascript" setup with npm in Getting Started section so people can get started quickly with npm and their chosen framework. This Stack Overlow issue was created just last month, pointing out the issue.

I created a simple stackblitz. I think if the code in there were to be in Getting Started guide, then it would help out. I'll try to create a PR on the weekend to the main repo. https://stackblitz.com/edit/js-zd1zvy?file=index.js

The aim would be to end up with something like this: https://www.npmjs.com/package/@recogito/annotorious

If you open it up in the npm registry, then the users have pretty clear instructions on how to get started.

[arnog]

The Getting Started page is here: https://cortexjs.io/mathlive/guides/getting-started/

I welcome any suggestions for improving it!

To be clear, there is no need to create a MathfieldElement, then initialize it, then add it to the DOM. You can do that, of course, but that's way more complicated than necessary. There's also no need to import the fonts.css stylesheet, unless I'm missing something.

Or are you suggesting that creating the MathfieldElement in JavaScript is necessary to integrate with frameworks like Vue, React, etc..?

BTW, there is also a React-specific guide (https://cortexjs.io/mathlive/guides/react/) but it would be great to have something similar for Vue3 (or Angular, or...).

[arnog]

Oh, there is also a section on creating MathFieldElement programmatically but perhaps that needs to be linked from somewhere else?

[hsellik]

@arnog Not necessary to create it for other frameworks. The documentation for npm installation is currently just a bit misleading:

$ npm install --save mathlive After you’ve completed this step, you can use MathLive as any other modules in your project:

import { MathfieldElement } from 'mathlive';
const mfe = new MathfieldElement();

As long as there's a guide on how to get it to work properly with npm, html and javascript, then the rest should be the worry for people using this library.

This framework works quite well, but it's just a habit for people. Most of the libraries require people to initialize it themselves. There's quite a lot of documentation and it's easy to miss the fact that the library initializes itself onto the math-field tag. As seen from this stack overflow post.

I propose the following change to the documentation:

$ npm install --save mathlive After you’ve completed this step, you can import 'mathlive' and use it in your html code. There is no need to create MathfieldElement, then initialize it and then add it to the DOM. Nor should you need to import css separately.

import 'mathlive';

<math-field>f(x)=</math-field>

You can, of course, use MathLive as any other module in your project if needed:

import { MathfieldElement } from 'mathlive';
const mfe = new MathfieldElement();

Perhaps this project should also convert to a source code for the wrapper instead of being an example that links to a minified wrapper. That way people can understand the wrapper better and it would be easy to contribute here if any updates or functionalities are needed. Probably would need some extra work to get the wrapper up on npm, but worth thinking about.

I also created a working example for Vue 3: https://github.com/arnog/mathlive/issues/2191#issuecomment-1847777115

[arnog]

Thanks for submitting a PR. I've merged it.

Do you mean a wrapper like this: https://github.com/arnog/vue-mathlive ?

[hsellik]

Yes, but the only place where I found the actual wrapper implementation was in the index.html import MathfieldComponent from "https://unpkg.com/mathlive/dist/vue-mathlive.mjs";

Is there a repository for the original non-minified version and how can people contribute to it? The community could help with making PR-s to make it Vue 3 compatible, add improvements, or just copy the wrapper and use it in their project. With the current setup, I don't see a good way.

[arnog]

Yes, the source for the wrapper is here: https://github.com/arnog/mathlive/blob/master/src/vue-mathlive.js

[hsellik]

Does that mean, that when the wrapper in the main repository is updated to Vue 3 and developers use https://unpkg.com/mathlive/dist/vue-mathlive.mjs , it will be broken for the old users?

Perhaps the version should be specified in the example? Such as https://unpkg.com/[email protected]/dist/vue-mathlive.mjs .

I'll make a PR for this.

Better yet, perhaps developers could use it from the package they have downloaded via npm? That way they can get the code automatically updated? Probably needs types in https://github.com/arnog/mathlive/tree/master/src/public if they use typescript? Is there a reason why there's currently dependency in package.json to mathlive?

Disclaimer. Not an expert on bundlers and library development, just a developer who uses Vite to generate projects and usually doesn't take deep dives on how the dependency is added, whether it's tree shaked, etc.