Experimenting with Hype and VUE.js

#1

This thread is about experiments with VUE and Hype. If you never heard about VUE it’s basically a reactive Javascript library. Meaning it offers things that go beyond jQuery like two way binding and easy reusable components. It follows in the footsteps of ReactJS but has a smaller learning curve and offers the usage of the library from a CDN (not forcing you to use a full development stack like nodejs+webpack etc., although you can if you want).

Read more about it here …

This simple example is implementing the VUE.js example (on their site) inside of a Hype project. In this case it shows how easy one can create a MarkDown Editor. This example is thereby very specific and uses some extra libraries like marked.js and lodash.js. I just thought as it is the official example I’d use this first:

Download Example “MarkDown Editor”:
MarkDownEditor-UsingVUEinsideOfHype.hype

6 Likes
Vue.js inside of Hype
Export/Import as ES5/ES6
#2

Here are some more ressources

And here is a introduction to VUE.js

1 Like
#3

Here is a example using components in Hype. This has the advantage that one can use VUE just in certain places as encapsulated components and the use the data from them in animations or other parts of the document.

The example uses the Bluefy Component Library! Nice stuff.

The example is fetching data from a Movie Database (please use your own API key in production) and from the Buefy example repository.

Download:
UsingBuefy-UsingVUEinsideOfHype.hype.zip

1 Like
#4

I’m learning ReactJS. Here in Europe is it JS interface library of choice. If it works in Vue, it should work in React.

You can create any component that contains html, css, js. I guess the key is if ReactDOM.render can render all of the Hype docs in a way thats seemless.

My goal (or at least try) is to implement Hype into ReactJS. Wish me luck.

I’ll let you guys know,

#5

I am from Berlin. Cheers. The statement if it works in React it works in Vue is, if I am not mistaken, only partly true. The difference being that Vue allows a CDN inclusion. The example here uses Vue inside of Hype. Wrapping Hype into Vue or React (so the other way around) might be problematic as you got two view library managing a „virtual DOM“ at once. If you consider the entire hype document as a component you might also run into problems as Vue / React will re-render the branch and thereby reset the Hype document on updates. If you manage on getting external parameter passed in and avoid any kind of initialitation flicker your still not golden as the Hype document loader doesn’t clean up after itself properly. You could run into garbage collection issues … but in case of an implementation in twine where I am using Hype as components I added a manual garbage collection but it’s rudemantry at best.

1 Like
#6

Ok. I’m in Bergen, Norway. Skål!
Looks like it maybe more complicated than I thought. :frowning:

React allows CDN inclusion as well.

The two kinds of React web apps are 1) single pages documents where content is (re)rendered client side and all the components can pass data between each other an know each others states. 2) Multi page apps where there are React component snippets reside in a standard html page. The React components do not know the existense of each other.

Based on this, the simple solution is #2 where you can place the Hype docs in the non React sections of the page. But the down side of this is that you aren’t taking advantage of the fast client side processing that React is famous for.

I need to read up more on and learn how the Hype docs works and then see if its possible to use #1 in implementing Hype. A lot to learn.

Ciao 4 now!

45%20PM
Screen Shot 2018-12-30 at 1.43.45 PM.png2808×1342 746 KB

1 Like
#7

The solution with Vue as components inside of Hype should work. What I am referencing with a simple CDN hookup of Vue is that React usually needs a build pipeline. There are workarounds for React though but they are not intended out of the box:

1 Like
#8

Love this thread!
Thanks!

1 Like
#9

Vue and Hype is an interesting combination. I have used Vue for a number if things, but never tried to combine it with Hype. I would like to see some examples of this.

1 Like
#10

HypeSceneVue

Here is another boiler plate to get Vue-Instances with the app wrapper being on the scene level:

HypeSceneVue.hype.zip

#11

HypeDocumentVue

Here is boiler plate to get Vue-Instances with the app wrapper being on the Hype document level:

HypeDocumentVue.hype.zip
Currently my recommendation!

#12

I can even run Vue live in the IDE but then you can’t rely on triggering Hype-API functions as in the IDE Hype isn’t fully rendered. If you only do components that live inside of rectangles and run the scene version one could use it like that. The nice thing the labels and databinding is functional. I’d highly recommend developing in a seperate file, though (instead of Head HTML).
If someone needs a boiler plate or want to go down the live preview road let me know.

Highly experimental version: couldn’t resist in putting that idea together

HypeSceneVueLive

This file has Vue running in the Hype-Editor. It is nice for plain value substitution but Vue’s interactions certainly interfere with the editing expirence.

HypeSceneVueLive.hype.zip
Highly experimental!

#13

Great tutorials and introductions to Vue for you:

#14

Hi @MaxZieb, is there anyway that we can import vue components (.vue files) into hype and use it as <my-component></my-component>?

Thanks,
Khoa

#15

I’m pretty sure the answer is no, as these need to be compiled and the component names wouldn’t be understood from within Hype’s DOM tree. You may be able to use a vue javascript API to manipulate components, but I think this will be an uphill battle. It may be easier to compile your vue site and if it is within a Hype document just embed as an HTML Widget with a specified URL to the vue-backed page.

#16

Hi @MaxZieb, thank you for the starter HYPE / VUE template! I have been experimenting and wonder if you could help pointing me where I'm going wrong? I am bringing in data from a googlesheet and rendering a menu and contents based on the data.
The menu actually works outside of HYPE, but in the scene the even.target throws an error.
I am trying to create the menu and the content to be hierarchical, so that "columns" only get added under their "chapters". I had this working with append when I was not using VUE, but now that I'm trying this approach not sure what would be the equivalent.

The idea is that "parts" get appended to "pages".
"columns" get appended to "parts" and other items such as text, images etc, get appended to "columns".

I though that maybe I could use the index of the "column" to check if it's greater than the preceding section and only add it if it = "true". But I can't work out where to put that logic in VUE.

Thank you.

#17

First you need to refactor away from jQuery. Having jQuery in a project can be a legacy burden but using it in conjunction with Vue is an abomination :slight_smile: That just might fix your problem.
Why are you running such a complex endeavor wrapped in Hype? I haven't seen anything that would need Hype in your app at this point? Not a single animation etc. also this was more of a proof of concept than a development path suggestion.

#18

I thought I was only using jQuery for the getting of the data $.each
I couldn't find a way to rewrite it without it breaking, so I was happy it just worked.

I guess I have been using hype for so long I'm used to the environment. But now I'm using whisk to test what I'm working on.

I thought I could integrate animations in transitions from page to page etc. But that would be the "bells and whistles" added later after I get the structure right.

#19

Good to hear also check

3 Likes
#20

That's super useful. I managed to remove jQuery! Also managed to integrate an api for images. It's still clunky but slowly progressing. Thanks for your help.

Products
Company
Social
Hype Support
Whisk Support
Store

Copyright © 2010-2020 Tumult Inc. All rights reserved.
Handcrafted in San Francisco.