Vexflow: I try to use vexflow in vue.js,but i dont know how to import it

Created on 22 Jul 2019  路  3Comments  路  Source: 0xfe/vexflow

first, i install it with 'npm install vexflow', and second import it with 'import Vex from 'vexflow'', but when i use 'Vex.Flow', it is undefined, so i want to know how can i use vexflow in vue.js. thanks!

Most helpful comment

Here's how I did it.

<script>
import Vex from 'vexflow/src/index.js'
let VF = Vex.Flow;
...
</script>

Now you can use VF anywhere within your script.

All 3 comments

global import

Here's how I did it.

<script>
import Vex from 'vexflow/src/index.js'
let VF = Vex.Flow;
...
</script>

Now you can use VF anywhere within your script.

I use it with vue cli https://cli.vuejs.org/

vue create hello-world

In a vue component:

import Vex from 'vexflow';

const VF = Vex.Flow;

export default {
  data() {
    return {
      ctx: null,
    }
  },
  mounted() {
    let renderer = new VF.Renderer(document.getElementById("editor"), VF.Renderer.Backends.SVG);
    renderer.resize(1240, 1754);

    this.ctx = renderer.getContext();
  },
}
Was this page helpful?
0 / 5 - 0 ratings