From where should a noob start learning vue.js for the sole purpose of using it in node-red?
Hi Lizzardguki,
Uibuilder is an amazing node that extends the capabilities of Node-red so you can create your own custom dashboard.
If you have played around with the default example template of uibuilder you must have already seen that it comes with Vue that its an awesome frontend language (even though you are not forced by uibuilder to use Vue .. you could use any library .. jquery, React, Angular or plain vanilla JS)
If you are really interested in Vue JS then i would recommend some excellent video tutorial by the NetNinja on youtube
and the recent updated tuts at
1 Like
Have a look for "Awesome Vue" as well, lots of resources there.
We are using Vue 2 by default, I've not had a chance to look at Vue 3 yet, it is very new and lots of existing libraries won't work with it yet I think.
Also remember that when you are getting going, look for tutorials and libraries that avoid a build step.
For what it's worth; I have been having great fun with Vue in UIBuilder and trying various examples from tutorials (a good one I found is (https://www.taniarascia.com/getting-started-with-vue/).
One important point that I worked out for running these examples without a build step is that index.js & index.html should be used instead of App.vue (main.js is not required) and that you must load and use httpVueLoader (example in one of the files in the UIBuilder wikipedia)
components: {
'EmployeeTable': httpVueLoader('EmployeeTable.vue'),
'EmployeeForm': httpVueLoader('EmployeeForm.vue')
}
I have also had fun playing with BoostrapVue. I managed to get the example in the above tutorial working with it. Persevere, and as advised by others read tutorials and the official guides.
1 Like
The best Vue libraries are written so that they can simply be added as a link reference like the other JavaScript libraries. In that case, they should auto-load. Sadly, not everything is well-written. But for those that are, you don't need httpVueLoader. bootstrap-vue is a good example of this and one of the reasons I chose it as a useful extension to the base Vue. You just load it and it works, no messing about.
However, you are correct that you shouldn't use app.vue. Simply merge what would have been in there into the index.(html | js) files.
If you write your own Vue libraries, please do make sure that you release them with a plain .js version that can be loaded without a compile step.
Also, if you have more examples and want to see them in the WIKI (that will eventually become a proper website, honest!) just let me know or even upload them and then let me know (so I can update the menu). Or add them as a flow to the flows site (but remember to tag them with "uibuilder" - that's all one word, all lower case).
Sorry, I probably should have pointed out that the files loaded with httpVueLoader were vue component files that I created, not loaded from t'internet.
I should also have continued reading the wiki example, I would then have read the
Load Vue components without a build step (modern browsers only)
example and realised that there was another way. Thanks for making me have another look at the manual. 
uh oh. I should have read further and seen the requirement that the component files be in Javascript, 'cause mine are in vue. I'm thinking that this is a limitation of uibuilder?
Hi, this is indeed a confusing subject. If it makes you feel any better, REACT is worse!
You have a number of options for loading Vue components.
- Compile your .vue files into JavaScript
- Load them dynamically using httpVueLoader
When compiling your .vue files you can:
- Only let them work if further compiled into a solution
- Let them work if added as a JavaScript script link in your HTML
- Let them work as modern components
If you are writing your own Vue components, it is easiest to start with .vue files and vue loader. But, when they are ready for release, compile them so that they can be loaded as simple javascript.
uibuilder is happy with anything that can be loaded - so these things are not limitations of uibuilder, it will work with anything at all! They are limitations of the framework.
As you should also have seen in the WIKI, there are certainly ways to work with a compilation/build step in uibuilder, it really isn't hard to do, just a little messy to get going the first time you do it. Also, actually doing the build is a bit of a pain if you haven't got ready access to the Node-RED server.
Hint: If you need a build step, use VScode as your editing environment and get the Microsoft remote editing extension.
So if you aren't too worried about performance of your ui, carry on using vue loader for your own .vue files. For a production environment, you will probably want to compile your whole codebase anyway.
If you run your builds using a package.json script entry located in the root folder of your uibuilder instance, you will be compatible with a future version of uibuilder that will add a build button in the Editor settings panel 
Lots to learn I know, but remember that this isn't uibuilder imposing this complexity, it is the framework. If you were just using JQuery as your framework, you wouldn't have this complexity but then you wouldn't have the power of Vue/bootstrap either 
Many people using uibuilder won't need more than Vue+bootstrap-vue as that combination already lets you build decent looking ui's that are as simple or complex as you like. But now that v3 is out, I can refocus on other areas and hopefully do some more improvements.
I think for the moment I will stick to httpVueLoader as the only person using these files is me. Once I get comfortable with vue & bootstrapVue I'll have a look at a build step.
As an aside, are there any examples using just Javascript? I am trying an example asked about elsewhere and have got most of it running but I'm not good enough to convert the Javascript stuff to run under JQuery without a lot of research.
If you don't need any of the other libraries, simply don't load them - uibuilder only needs the uibuilderfe.js library (or the min version). That's it
You need to run uibuilder.start() which kicks it all into action. Then you can use a listener for the incoming messages and the send function in the same way as in the Vue example.
The only thing to watch out for if using no framework is that uibuilder may start up before the DOM is ready. So if you are trying to do something with the DOM (change an on-ui displayed value for example), then it might fail if the initial msg comes in too fast. I can't remember the details off the top of my head, but there are ways to make sure the DOM is ready before you run something. Search is your friend there.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
