# Simple uibuilder + Vuetify dashboard

**URL:** <https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175>\
**Category:** Dashboard\
**Created:** [4 May 2021 17:50 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175 "2021-05-04T17:50:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [4 May 2021 17:50 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175/1 "2021-05-04T17:50:26Z")

</div>

(This is a continuation from some of the thread.)

I've been continuing to work on my little dashboard using uibuilder and vuetify. I replace vue-svg-gauge by my own dependency-less and animation-less version and more importantly, started to split components up into "foo" and "foo-card", where foo is the raw component that can be placed anywhere and foo-card is the same component wrapped into a v-card in such a way that it can be "just" placed into a grid. The idea is that the "-card" components can be dropped into a grid from some config sent by node-red while the non-card components can be used to build custom stuff. My test page now looks as follows:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/88af38e4d6ec301409fa187aebac611c5a63afaa.png)

The second row of widgets is composed of an array of `gauge-card`s. The third row has 4 more `gauge-card`s with different options but the last card in that row is an explicit/custom card that includes 3 `gauge`s (the `gauge` component doesn't print value or title, it's the `gauge-card` that adds this, the assuming being that in a custom setting one may want to format these text strings very differently).

In terms of html the four `gauge-card` on the third row look like this:

```auto
  <gauge-card title="bedroom" unit="°F" :value="nr.bedroom"
      :gauge="{min:30, max:120, arc:90}"></gauge-card>
  <gauge-card title="gh-air" unit="°F" :value="nr.gh_air"
      :gauge="{min:30, max:120}"></gauge-card>
  <gauge-card title="gh-air" unit="°F" :value="nr.gh_air"
      style="grid-row:span 2" :gauge="{min:30, max:120, stretch:true}"></gauge-card>
  <gauge-card title="gh-air" unit="°F" :value="nr.gh_air"
      style="grid-row:span 2; grid-column:span 2" class="gauge-large"
      :gauge="{min:30, max:120, stretch:true}"></gauge-card>

```

While the custom card with the three gauges looks like this:

```auto
  <v-card style="grid-row:span 2">
    <v-card-text class="d-flex py-1">
      <span class="mx-auto">Three gauges</span>
    </v-card-text>
    <div class="d-flex">
      <gauge v-bind="{min:30, max:120, arc:180}" :value="nr.bedroom"
          style="width:80%; height:auto;" class="mx-auto mt-2"></gauge>
    </div>
    <div class="d-flex flex-row mt-5">
      <gauge v-bind="{min:30, max:120, arc:90, color:'#0091ea'}" :value="nr.study"
          style="width:80%; height:auto;" class="mx-1"></gauge>
      <gauge v-bind="{min:30, max:120, arc:90, color:'#ffd600'}" :value="nr.gh_air"
          style="width:80%; height:auto;" class="mr-1"></gauge>
    </div>
  </v-card>

```

The "orchard status" card is also a custom card that includes four of the `stat` components that also make up the whole top row of widgets. I don't have a distinction between `stat` and `stat-card` yet, I probably should...

Overall this shaping up to be quite nice!

(A sample flow with the dashboard uibuilder stuff is in [GitHub - tve/uibuilder-test: Node-Red Test Dashboard using uibuilder](https://github.com/tve/uibuilder-test))

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2021 19:22 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175/2 "2021-05-04T19:22:37Z")

</div>

Shaping up nicely. Quick question - is vuetify actually a dependency for your components?

If you are looking to publish your components at some point, could I suggest that the repo name start with "uibuilder-vuejs-"? So that such components are easily discoverable?

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [4 May 2021 20:36 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175/3 "2021-05-04T20:36:37Z")

</div>

> [@TotallyInformation](#):
>
> Shaping up nicely. Quick question - is vuetify actually a dependency for your components?

Good question! I hadn't even considered that... So it turns out the gauge and uplot components are not dependent on vuetify. But the -card components definitely are 'cause they all use the `v-card` vuetify component. That actually seems like a reasonable split, as I refactor I'll try to maintain that. So basically we'd end up with 4 classes of artifacts:

- vue.js components
- vuetify and/or bootstrap-vue widget components
- nodes to format/handle messages corresponding to the widgets
- nodes or custom editor stuff to handle widget layout (for auto-placed widgets)

(I'm quite certain I won't be working on the last item. I'm ambivalent about the third and am currently just using a couple of subflows for reusable stuff and else just use function nodes.)

> [@](#):
>
> If you are looking to publish your components at some point, could I suggest that the repo name start with "uibuilder-vuejs-"? So that such components are easily discoverable?

Makes sense. I'm not sure where my repo is headed. I'm not intending to make it something I'm releasing and maintaining for others to install and just use. I'd gladly work to fit my stuff into a team effort, but to make it usable I know there's too much stuff needed that I don't need at all and don't want to build and maintain.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2021 20:41 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175/4 "2021-05-04T20:41:10Z")

</div>

> [@tve](#):
>
> the -card components definitely are 'cause they all use the `v-card` vuetify component.

OK, not too bad. Maybe when I get a chance, I'll have a look to see if I can reproduce that part with bootstrap so that it can be used with the default uibuilder install.

Might be interesting at some point to see how easy it might be to reproduce a card without a dependency 🙂

> [@tve](#):
>
> I'm ambivalent about the third

Yes, agree, there is already too much to do so unless other people step up to the plate to help out, things may stay this way for some while.

> [@tve](#):
>
> I'm quite certain I won't be working on the last item

Yep, that's the hard part for sure.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 May 2021 20:41 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175/5 "2021-05-04T20:41:54Z")

</div>

> [@tve](#):
>
> the -card components definitely are 'cause they all use the `v-card` vuetify component.

OK, not too bad. Maybe when I get a chance, I'll have a look to see if I can reproduce that part with bootstrap so that it can be used with the default uibuilder install.

Might be interesting at some point to see how easy it might be to reproduce a card without a dependency 🙂

> [@tve](#):
>
> I'm ambivalent about the third

Yes, agree, there is already too much to do so unless other people step up to the plate to help out, things may stay this way for some while.

> [@tve](#):
>
> I'm quite certain I won't be working on the last item

Yep, that's the hard part for sure.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [4 May 2021 20:52 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175/6 "2021-05-04T20:52:38Z")

</div>

> [@TotallyInformation](#):
>
> > [@tve](#):
> >
> > the -card components definitely are 'cause they all use the `v-card` vuetify component.
> 
> OK, not too bad. Maybe when I get a chance, I'll have a look to see if I can reproduce that part with bootstrap so that it can be used with the default uibuilder install.
> 
> Might be interesting at some point to see how easy it might be to reproduce a card without a dependency 🙂

I don't think it would be difficult at all to switch to bootstrap-vue. What the `-card` components do is wrap the raw component in a `v-card` and add a `v-card-title` inside of that, etc, to position everything. So it's really "just" a matter of changing some tag and class names to use comparable bootstrap-vue functionality. (Plus spend hours tweaking the CSS crap...)

I don't think it makes sense to "reproduce a card without a dependency" because the whole point of bootstrap-vue or vuetify is to get a uniform look that can be customized easily. So while you can, of course, produce something that looks like a vuetify v-card using a bunch of div's and styles I fail to see the point because if you'd load those into a bootstrap-vue project, for example, these things won't look like the custom cards/widgets you craft in for the rest of the page.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 June 2021 20:53 UTC](https://discourse.nodered.org/t/simple-uibuilder-vuetify-dashboard/45175/7 "2021-06-03T20:53:02Z")

</div>

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