First attempt with uibuilder

[fmarzocca]

This is my first attempt with uibuilder, so I am trying to follow the example in the docs. I have suddenly faced my first problem.

I have installed vue and bootstrap-vue from uibuilder and load the template TotallyInformation/uib-template-test .

The web page is blank and in the console I see this message: index.js:24 Uncaught ReferenceError: Vue is not defined. Looking at the index.html code it reports: <script src="../uibuilder/vendor/vue/dist/vue.min.js"> but I don't have any vendor folder in my uibuilder tree:

boss@SaltyRest:~/.node-red $ ll uibuilder/
total 36
drwxr-xr-x  6 boss boss 4096 Jun 16 11:38 .
drwxr-xr-x  9 boss boss 4096 Jun 16 11:30 ..
drwxr-xr-x  3 boss boss 4096 Jun 16 11:00 common
drwxr-xr-x  2 boss boss 4096 Jun 16 11:00 .config
drwxr-xr-x 16 boss boss 4096 Jun 16 11:38 node_modules
-rw-r--r--  1 boss boss  876 Jun 16 11:38 package.json
-rw-r--r--  1 boss boss 7606 Jun 16 11:38 package-lock.json
drwxrwxr-x  3 boss boss 4096 Jun 16 11:38 uitest

So, the code doesn't load the vue.min.js file and I'm stuck...

[UnborN]

Hello ..

What version of Vue have you installed ?
Can you show us a screenshot of installed packages of the node's Libraries tab ?
Most of the uibuilder templates are based on Vue 2 and that version (vue@2.6.14) should be installed instead of Vue 3 (which is now the default)

ps. the vendor path will be dynamically created by uibuilder and its not something you will see in your app's folders

ps2. have you also tried to load the Simple Vue template ? Does that work ?

[fmarzocca]

I have followed instructions in the docs, where it says just to type "vue" into the Library section of the node.

Very tough. The console error means that it doesn't find any Vue definition

[Steve-Mcl]

You are using Vue 3. You should really use Vue 2 as suggested by @UnborN

Bootstrap 4.x does not support vue 3

[TotallyInformation]

Yes, as mentioned in other posts, the Vue project made a terrible error in my view of pushing Vue v3 far too early. It has become a pain.

Thankfully, one of the changes made in uibuilder v5 allows you to directly install packages with different versions and even from github and different branches.

So you can simply use the library manager and add vue@2 and it will overwrite v3 and everything should work as expected.

@fmarzocca

I don't have any vendor folder in my uibuilder tree

The /uibuilder/vendor/ URL path simply ensures that there are no URL name clashes when uibuilder and Node-RED serve files via the ExpressJS web server. The vendor part is a common web server naming convention when the web server is service 3rd-party libraries. If you look at the "details" page available from one of the buttons in the Editor panel, you will see how the /uibuilder/vendor/ paths map onto filing system folders. I try to stick to the naming convention of "paths" for URL's and "folders" for the filing system because I know that it can be confusing between the two if you aren't used to thinking about the separation between the front-end and the back-end.

In short, ../uibuilder/vendor/ will map to ~/.node-red/uibuilder/node_modules/