Is Vuetify compatible with uibuilder?

Dashboard
1

I use Vuetify for everything, but I just started getting move heavily involved with node-red, and now uibuilder.

Is is possible to use Vuetify with uibuilder, or are there known issues?

2

Hi Scott, I've not tested it but I see no reason why not. If you decide to use it, you can uninstall the default bootstrap-vue as you won't need it.

Let me know how you get on.

The main thing with Vue extensions is whether they will load direct from a link tag or whether they require a build step. bootstrap-vue loads direct from a link tag. One of the reasons I chose bootstrap-vue over Vuetify was that it seemed very happy just being loaded that way.

Having checked the Veutify documentation, it says that you can load from CDN. Simply follow the same instructions but change the links to use your local installation.

For the CSS, in the head section, the following replaces the bootstrap and bootstrap-vue references:

<link href="../uibuilder/vendor/vuetify/dist/vuetify.min.css" rel="stylesheet">

At the end of the body section (use min versions if you like):

    <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
    <script src="../uibuilder/vendor/vue/dist/vue.js"></script>
    <script src="../uibuilder/vendor/vuetify/dist/vuetify.js"></script>
    <script src="./uibuilderfe.min.js"></script>
    <script src="./index.js"></script>

And don't forget to add a reference to the vue app in your index.js:

new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      ...

Of course, you could also use a build routine as well but that is a bit more involved. There is an example in the WIKI though if you decide to go that way.

Oh, one other thing to watch out for. Vuetify uses ES6 features so you will need to use a modern browser. If you need older browser support, you will be forced to use a build step with a transpiler.

1 Like
3

Thanks for that! I discovered that Vuetify worked just fine.

I followed your Wiki guide for getting this to work with webpack, but I ran into an error.

Before I go into the next part, I'm working in inside of a Docker container, in VSCode, with the root of the container source code at my uibuilder project level. In-other-words, if my project is at, <node-red-base-folder>/projects/<node-red-project-name>/uibuilder/myvueproject, I'd right click on myvueproject and choose "Open with VSCode". Once I'm in VSCode, I open the command palette, Ctrl-Shift-P, and select Remote-Containers: Reopen in Container.

I then follow the usual vue-cli quick-start from Vuetify, found here. Which is generally the same as what you show in your Wiki.

So, my problem comes in when I attempt add import uibuilder from './../../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.js' to main.js. It can't find the file, and I believe it's because I'm inside of a container, in a sub-folder of node-red and uibuilder. So, webpack can't see the uibuilderfe.js file. Does that sound correct?

I'll experiment again, this time adding a volume to the docker container that points to the location of uibuilerfe.js, and allows the container to see it. Otherwise, I'll probably have to experiment inside of a node-red image container until I figure out what I'm missing.

Bottom line, I'd love to use the .vue template files and folder structure. Instead of huge html/js files.

Thanks a million! Your uibuilder is making great things happen!

P.S., I did get something to work, but only after I either reopened the container at a lower folder level, or I ran npm install node-red-contrib-uibuilder at my project level. However, no matter what, I get the error Cannot read property 'endsWith' of undefined, in uibuilderfe.js.

4

Frankly, that sounds horribly complex! I get that there are reasons to use Docker but it does add massive complexity to any deployment.

I would guess so, but I don't generally use Docker so I couldn't say for sure. It certainly sounds like the most sensible place to start looking.

Thank you for the encouragement.

Hmm, that is an issue with ES6. I added a polyfill to uibuilderfe for endsWith since it is such a useful function. Double-check that you are getting the right version of the file. You can output the version with uibuilder.get('version') - I try and keep it the same version as the package even if nothing changes in the front-end - occasionally I forget though so it is sometimes a version behind.

In the current v2.0.4, the pollyfil starts at line 48.

5

uibuilderfe.js, lines 105 and 165, throw the endsWith ... undefined error.

I modified the source, and now it works:

Line 105:
// @since 2017-11-06 If the last element of the path is an .html file name, remove it

if (u.length > 0) {
if (u[u.length - 1].endsWith('.html')) u.pop()
}
`

Line 165:
// handle url includes file name
if (fullPath.length > 0) {
if (fullPath[fullPath.length - 1].endsWith('.html')) fullPath.pop()
}
`

Hope this helps someone.

1 Like
6

OK, good spot. I guess that the polyfill I used isn't as good as the real thing since that doesn't error out.

I will add a bugfix and re-release, hopefully this weekend if I can.

1 Like
7

Added to v2.0.5 - now published.

8

Outstanding! Thanks so much for your hard work!

1 Like
9

FYI, it would be great for the package manager's "add" button to have some way to locate existing packages. I'm using docker, packages are installed in the docker script, there is no dynamic npm install (well, technically it can be run but the result is lost at the next container restart). I need to add vuetify, roboto-fontface, and material-design-icons and I already have them in the container. I really don't want package manager to run any mpn install, that can only lead to confusion.

10

You can easily add existing packages.

If you look in uibuilder's .config folder (typically found at ~/.node-red/uibuilder/.config on a standard install without projects), you will find 2 files masterPackageList.json and packageList.json.

Both can be altered if you want to. The master list is used when Node-RED starts up to check your installed packages, if it finds that you have installed any of the ones in the master list, it will automatically serve them for you. When it does so, it adds them to the package list. You can also change the package list manually.

So there is no absolute need to use the package manager, like everything else in uibuilder, it is simply there as a convenience.

1 Like
11

Thanks: How to manage packages manually · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub

1 Like
12

How does one cause the package manager to reload the package list files? Or does one have to restart node-red after modifying these files?

13

Yes, unfortunately, if you manually update the package list, the only way Node-RED has of knowing is if you restart. If you update via the package manager, it will update automatically without a restart. Possibly, if you just did a forced redeploy that might be enough.

14

For anyone discovering this thread. Please note that uibuilder's package handling has been completely rewritten and the root folder for uibuilder served front-end libraries has moved to the uibRoot folder, typically ~/.node-red/uibuilder/.

You can still manually install packages but remember that you will need to restart node-red to be certain that they are picked up. You don't need to restart node-red if using uibuilder's library manager.

To manually install:

cd ~/.node-red/uibuilder/
npm install xxxxxxx