Uibuilder import free vue/tailwind template

Hello,

i'm not shure if it's possible. And if it's possible how dose it works? What must i do?

If i use uibuilder in node-red can i import some free templates like this?

Hi David,

It should generally be possible, yes. Though with the complexities of such frameworks, it is not uncommon to see poorly written templates that might struggle.

Generally, you should simply be able to follow the instructions given in the template for its use.

For access to the template files, you can either reference the resources from a CDN on the web or you can use the uibuilder node's library manager if it has a public installable package (e.g. on npmjs.org). If it isn't available either of those ways, you can manually download it and put the files into ~/.node-red/uibuilder/.common/ folder. You can then access them using the URL ../uibuilder/common/<yourfile>.

Before all that though, you will, of course, need to get VueJS and TailwindCSS up and working. There is info in the docs to help with Vue as well as some basic templates and library examples and I strongly suggest running through a basic template/example first so you get the idea of Vue. Then do something similar for TailwindCSS - I've never used that so I might not be as much help there but reach out anyway if you are getting stuck.

Once you've got the 2 dependencies working then it should be easy enough to get the template installed and working.

I note that Tailwind seems to want its own build process. Hard to know how you might want to integrate that with your Node-RED/UIBUILDER app.

The simplest way might be to install Tailwind in a clean directory, build the CSS output you want and then move that final CSS file into your UIBUILDER instance root folder.

Once you know how Tailwind works, you can later integrate that into your uibuilder instance and I can talk you though that. It looks harder than it is, but you need to have a clear mental map of the different folders and scripts.

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