Uibuilder Uncaught TypeError: Vue is not a constructor

I've followed steps from Uibuilder: Getting Started Walkthrough - #4 by HaroldPetersInskipp,

initial uibtest flow works fine, but I'm stuck when I tried this flow:
https://flows.nodered.org/flow/bbe6803d9daebda5c991336cf4e5e3e0

or How to install UiBuilder and Setup UiBuilder Dashboard in Node-RED [Example] - YouTube

Initially I got these errors:

First I changed index.html file line 28 to: <script src="../uibuilder/vendor/vue/dist/vue.global.js"></script>

Then I got

How to solve this issue?

I solved the error by changing index.js to var app1 = Vue.createApp({.. but page still shows
image

Uibuilder doesn't show "Connected:1"

Setup:
image

No errors in browser:

The quote of the day example on the Flow site is over 3 years old and so is somewhat outdated I'm afraid. I will make a note to update it.

The link that you changed however shows what the problem is - you have Vue v3 installed whereas the example requires Vue v2. You can switch to v2 using uibuilder's library manager, add a "new" library with the spec vue@2. For Vue v2, the link is ../uibuilder/vendor/vue/dist/vue.min.js for the prod version or without the .min for the dev version.

If you want to both v2 and v3 together, you will need to load one of them from a CDN on the Internet. For example, loading Vue v3 from the Internet, you can use the link https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.global.prod.js

Solution is for Vue 2, but I still cannot get it running under Vue 3.

I would like to take a step back.

I have no experience with Javascript frameworks and would like to start somewhere.
If I understand correctly all examples I see in here: https://flows.nodered.org/collection/oIlM1_y7X0G
use Vue2.

My use cases are quite simple, but sometimes I don't like the end result done with dashboard.
What direction is uibuilder development going? Should I stick to No framework and learn make applications in html,css or start learning some framework?

Vue v3 is quite a different beast to Vue 2 unfortunately and I've not had time to work up many examples yet. I do have one very basic example worked up for the uibuilder v6.1 release - I think it should work under uibuilder v6.0 as well, can't think of a reason why not. Let me know if you want it but it really is a very simple example.

Yes, Vue v3 is pretty new.

Hard to give you too much direction without knowing the kinds of things you are likely to want to build.

But at present, I am more focused on what can be achieved without a framework. I keep seeing the frameworks go off at tangents and increase in complexity as they mature. At the same time, HTML/CSS is maturing too and as long as you are happy ignoring older browsers, I feel that is possibly the way to go if only to help future-proof what you might be building.

If you do need to account for old browser versions or if you need to stretch beyond what is currently achievable with pure HTML/CSS/JS, they I would suggest looking at a framework that has a stated intent to complement pure HTML rather than replace it.

For example, Svelte is quite easy to pick up and is capable of building HTML Components. There are one or two other frameworks with similar aims but Svelte is not only easy to work with, it is fast and has the advantage that, whilst it does need a build step, it's dev server with live reload (a real boon while developing with build steps) is fully compatible with uibuilder.

However, if you have the time and inclination, I would certainly recommend learning at least the basics of what you can do directly on the DOM with pure HTML, CSS and JavaScript along with the help that the new uibuilder client gives you. I'll be continuing to extend the vanilla HMTL capabilities of uibuilder with features that will let you continue to reduce the amount of code you need to write so that you can get started quicker even if you eventually end up writing custom code. One of the things I see as a tremendous benefit of uibuilder is that it lets you get things done but does not tie you to a framework - instead, you can progressively enhance your web apps. Starting with the simple builder capabilities developed so far but then allowing you to continue to extend and add value using the HTML that is built for you. You can't do that really with any of the other Node-RED dashboards without knowing a reasonable amount about the specific framework that is being used.

So in summary, if your needs really are quite simple, vanilla HTML/CSS/JS is the way to start I personally think. Then if you really need to, you can further enhance with a compatible framework that builds HTML components. But for simple things, I think that unlikely.

What I'd also be interested in is hearing about what you want to (and do) build. Because I certainly want to extend the auto-build features such as the experimental uib-list node (that is going to be deprecated in the next release by the way, replaced with a new, more generic, uib-element and matching uib-update nodes). uibuilder already has the configuration-driven, low-code way of building UI elements, the new nodes simply make that even easier and output the configuration that can be further enhanced or simply turned into HTML for you to extend yourself.

Anyway, sorry, I'm rambling now :slight_smile: Just remember that I'm happy to listen.

PS: The one thing that any web UI developer needs to know is how to use CSS Selectors. :wink: That will stand you in really good stead as you progress.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.