Vue.js inside of Hype

Using JavaScript with Hype
1

Has anyone worked with or know about using Vue.js inside of Hype? To be clear, I’m not asking about embedding a Hype document inside a Vue.js app but rather including the Vue library inside a Hype document and using it to manage DOM etc. For those not familiar, Vue.js is a very popular and very lightweight Javascript library similar to React. For what I’m doing, this would not be overkill, but I’m assuming it could work and just wanted to check and see if others have tried to do something similar.

3

One issue that occurs to me is that in Hype, we get elements using HypeDocument.getElement . . . whereas a framework like view would need to get access the DOM directly. Would this be a problem?

4

I don’t have experience using this, but in regards to the hypeDocument.getElementById vs. document.getElementById, the only difference is that the hypeDocument one is more resilient in the face of conflicts caused by multiple hype documents on a single .html page. Hype absolutely requires unique element IDs, so it may rename your requested ID in a case of collision. If there’s no collisions it is identical to document.getElementById. Hype does do a lot of management of the DOM itself, so I’d think there are possibilities of Vue.js and Hype’s views of the world differing and causing issues, but who knows :).

1 Like
5

Thanks @jonathan. There would definitely only be one Hype document per page, so that doesn’t seem like it would be a problem. That’s good to know. Also, I would only be operating on rects with inner html set dynamically - no video or other Hype Elements being used. Hype actually makes a good client for a web app.

6

If there’s any tips or tricks you come up with, please do share those!

7

Hello,

this is an interesting topic. Putting VUE.js inside of Hype shouldn't be a problem. At least when sticking it into a container. As for managing state across the whole document I do suspect that the virtual DOM and Hypes DOM management could/would collide (but I certainly would like to test it).

For a test I just used the MarkDown Editor Example from the VUE.js page and transferred it into Hype.

See this thread:

1 Like