How to add MathQuill

[alfredclyim]

I tried to add MathQuill (https://www.npmjs.com/package/mathquill) to existing quasar project but can’t make it work. Do you have experience in adding similar module to quasar project?

[krsyoung]

Any chance you can share the related code / the steps you took to try and add it? Is there a specific error happening?

[genyded]

JQuery plugin - yuk… but if you must. I haven’t actually tried this because I do not want to pollute any of my projects and I do not have a ton of time to invest in it. First it seems like you would need to npm (or yarn) install JQuery and add JQuery via a Quasar plugin. Not sure how MathQuill expects it, but something along the lines of:

// Quasar plugin jquery.js 
import jQuery from 'jquery'

window.$ = window.jQuery = jQuery

Then the same for MathQuill - npm install and Quasar plugin (you’ll have to look into the node_modules folder for where exactly the css is located and maybe use min version if provided. Also don’t forget to add the plugins to quasar.conf.js):

// Quasar plugin mathquill.js 
import '../../node_modules/mathquill/PATH_TO_CSS/mathquill.css'
import MathQuill from 'mathquill'

export default ({ Vue }) => {
  Object.defineProperty(Vue.prototype, '$mq', { value:  MathQuill.getInterface(2));
}

Then in any Vue component, you should be able to access it as this.$mq. As I said, I haven’t actually tried it and you may have some trial and error to get it working, but hopefully this helps get you going in the right direction.

If you cannot get this working, you can try it with MathQuill on the window like the JQuery above, but the many JS gods frown on window variables. In this case though I think JQuery will have to be there for MathQuill to see it.