up vote 0 down vote favorite

I am trying to use an external JS library that generates a drawing canvas (atrament.js) within a vue.js app.

I am not sure what is the right way of doing this. Right now I am just doing:

<script type="text/javascript">
    var main = new Vue({
        el: '#vueapp'
    });
</script>
<script type="text/javascript">var atr = atrament("canvas", 500, 500);</script>

And with that the canvas is generated wherever I put the <canvas></canvas> tags.

However, this does not seem a very elegant option, and the atr var is not accessible for the vue app, for example for clearing the canvas. So, which is the right way of doing this?

share
up vote 0 down vote

You should have atr variable as a vue data variable, like following:

<script type="text/javascript">
    var main = new Vue({
        el: '#vueapp',
        data: {
          atr : atrament("canvas", 500, 500)
        }
    });
</script>

Now atr will be available in the vue app via this.atr and you can do required operations on it.

share
    
Thanks for your answer, I had tried that already, but the canvas doesn't work when I do that. For some reason the canvas appears but I cannot paint on it. No errors are shown in the JS console. When doing this I am loading the vue app at the end of the html file, because if I put it on the <head>, then it says "<canvas> tags not found", so the canvas library is actually doing something. – user1294122 Dec 26 '16 at 14:00
    
@user1294122 can you create a fiddle of it? – Saurabh Dec 27 '16 at 3:27
up vote 0 down vote

Since Vue is a component-based UI library, you should try to think in components.

Consider wrapping that canvas in a component and your parent element will talk to it via props and events. Vue has a very clean documentation for that: https://vuejs.org/v2/guide/components.html

share

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.