Uibuilder - VueJS & bootstrap-vue Content Can't Load

I decided to revisit uibuilder but am running into roadblocks again. The blank template example loads fine, but not the other examples. I haven't modified anything and installed the required libraries. Am I missing something? I've looked in the uibuilder folder but there isn't a vendor folder.

Firstly, you need to understand the difference between a URL path and a filing system path.

The URL path ../uibuilder/vendor/<package_name>/ maps to a filing system path <uibRoot>/node_modules/<package_name>/.

Where <uibRoot> is the root folder that all uibuilder files sit under, typically ~/.node-red/uibuilder but may be moved anywhere.
<package_name> is the name of the npm package that has been installed. This is taken from the name property in the packages package.json file. So its definition comes from npm.

If you open the "Details" page by clicking the appropriate button on the Core tab, you will see a list of available libraries along with their estimated URL and the actual filing system path that is served up by uibuilder. Any file in that path will be accessible to your front-end code, just mentally map from the filing system to the URL as indicated above.

The other thing to note is that the "URL to use" is a guide, not an absolute. Unfortunately, not all package authors use the package.json consistently and, in addition, there are too many options. So it isn't possible for uibuilder to 100% accurately predict the URL you need to use, it can only make a best guess. While it is often correct, the safest thing to do is to open the filing system folder and check. In a future release of uibuilder, I will improve the display to make it clearer that the URL is only an estimate.

However, the reason your templates aren't working is because you have installed VueJS v3 and not v2 as per the instructions. Annoyingly, the Vue project switched their default versions a short while back even though most Vue extensions don't yet support v3 which has some really major changes to the way things work.

If you do want to use Vue v3, you can certainly do so, uibuilder doesn't care. However, the existing templates also require bootstrap-vue which does not yet support Vue v3.

To install VueJS v2, all you need to do is click the Add button and give the name vue@2, it will overwrite your v3 install (without changing any of your own code).

Awesome. It works now! Thank you! Hopefully I can start making uibuilder do what I want. :smile:

1 Like

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