# DB2 - Vuetify samples not working anymore in UI-Template

**URL:** https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [30 September 2025 23:50 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226 "2025-09-30T23:50:04Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [30 September 2025 23:50 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/1 "2025-09-30T23:50:04Z")

</div>

Hello everyone, I was in the mood to put some fancy multi-tab function into my light controls

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0cbebcbeb27ad0a556d996bc0c6a632c34db4823.png)

So I went to [Vuetify](https://vuetifyjs.com/en/components/tabs/#usage) to check-out their samples. Unfortunately the ones of interest for me failed... see working test-flow in Vuetify [here](https://play.vuetifyjs.com/#eNqVU9tu2zAM/RVCGNBd4thulj4YSYdir/uDeUBVmU6EyZIgyQ6yIP8+ynbS2Og27MGASB4fikeH30/MO5E+WbvsWmQF2wRsrOIBH0sNsOkSwV3Vn/so8BcPXdKYCtW2ZBSWDLiSO92XKIW6opQwyjiKKkSb2NZZhQkXAnVIPpds5LswQtFx1SLBc6p947ryglvcpH31j+B7An+V4fgv3IpwTy8+OC7CFDtGnsLJhMlB6soc5oPOOlxgiSTNCFv3E2uQGqglFD/xGON4vFyFgivJoK7RgUuNDmrVyovQ17Izh0lq/Eddu8nY7eG1mxy0jw+Rkz7QVHS6VfyGRza7eRagUPzXMSFP0H/P+xCsL9LUSuHbZmn3Jhif5ln68EU2fIfbdycJH0HTt4ZPkGfn55K9wflXunWWpass+y/GPcrdPkQPZOu36sJ06Obpx/jcNPRcUcqSZFPpKTfVfkCNj/VqhNFAt06YeWssDesUSYZ92qQ3i0ahF07aAB5Da3usbKxxAU7gsIYz1M40cEc7ejd4le7iA0SfbyPivW6V+hBpByKiYOcFWy3Xy/ucxUOeLVdsUXPlcTHZ+SH34zfHtC47)  
this is the Vuetify version:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/510fd18ab4a55fcad08da7458bbbf39e1d86b984.jpeg)

Unfortunately, when copy-pasting the content into ui-template it does not work the same way (most other samples work fine). Thats the same code result in NR below

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/9135f5178abd23dce086f871f721d2fe8d7858ec.png)

```auto
<template>
  <v-card>
    <v-tabs
      v-model="tab"
      align-tabs="end"
      color="deep-purple-accent-4"
    >
      <v-tab :value="1">Landscape</v-tab>
      <v-tab :value="2">City</v-tab>
      <v-tab :value="3">Abstract</v-tab>
    </v-tabs>

    <v-tabs-window v-model="tab">
      <v-tabs-window-item
        v-for="n in 3"
        :key="n"
        :value="n"
      >
        <v-container fluid>
          <v-row>
            <v-col
              v-for="i in 6"
              :key="i"
              cols="12"
              md="4"
            >
              <v-img
                :lazy-src="`https://picsum.photos/10/6?image=${i * n * 5 + 10}`"
                :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
                height="205"
                cover
              ></v-img>
            </v-col>
          </v-row>
        </v-container>
      </v-tabs-window-item>
    </v-tabs-window>
  </v-card>
</template>

<script setup>
  import { ref } from 'vue'

  const tab = ref(null)
</script>

```

I hope somebody can help getting this working.

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [1 October 2025 04:02 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/2 "2025-10-01T04:02:50Z")

</div>

OK... chatgpt came to the rescue 🙂 .. below is a sample code I will work on

```auto
<template>
  <v-card>
    <v-tabs v-model="tab" align-tabs="end">
      <v-tab value="overview">Overview</v-tab>
      <v-tab value="config">Config</v-tab>
      <v-tab value="misc">Misc</v-tab>
    </v-tabs>

    <v-window v-model="tab" class="mt-2">
      <!-- Overview -->
      <v-window-item value="overview">
        <v-container>
          <h3>Light Status</h3>
          <p><strong>Status:</strong> {{ msg?.payload?.status }}</p>
          <p><strong>Hue:</strong> {{ msg?.payload?.hue }}</p>
          <p><strong>Color:</strong> <span :style="{color: msg?.payload?.color}">{{ msg?.payload?.color }}</span></p>
          <p><strong>Remaining:</strong> {{ msg?.payload?.duration }} mins</p>
        </v-container>
      </v-window-item>

      <!-- Config -->
      <v-window-item value="config">
        <v-container>
          <h3>Configure Light</h3>
          <v-text-field v-model="lightConfig.hue" label="Hue" type="number" min="0" max="360"></v-text-field>
          <v-text-field v-model="lightConfig.color" label="Color" placeholder="e.g. red, #ff0000"></v-text-field>
          <v-text-field v-model="lightConfig.duration" label="Duration (mins)" type="number" min="1"></v-text-field>
          <v-btn color="success" class="mt-2" @click="send({payload: lightConfig})">Apply</v-btn>
        </v-container>
      </v-window-item>

      <!-- Misc -->
      <v-window-item value="misc">
        <v-container>
          <h3>Miscellaneous</h3>
          <p>Extra settings or notes can go here…</p>
        </v-container>
      </v-window-item>
    </v-window>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      tab: 'overview',
      lightConfig: {
        hue: 180,
        color: '#00ffff',
        duration: 30
      }
    }
  },
  watch: {
    msg(newMsg) {
      // You can update UI reactively if msg changes
    }
  }
}
</script>

```

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [1 October 2025 09:57 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/3 "2025-10-01T09:57:30Z")

</div>

OK .. somwhow the vuetify samples are not properly working for me anymore (they did well in the early days of DB2)

another example which does not work [here](https://play.vuetifyjs.com/#eNrllVFvmzAQx7/KyarUVgoJSZOpQmml7WXve10m1cEXYs2AZRuWCPHdd5g6gXRan6pKLU/wO3P3v/sb/LNh1qSzr1pP6wpZwtYOc624w8dNAbCuo5QbAdYdFT5sWM5NJosEeOXKDYM/Urg94WUcb5h/wb9i0OqysLLGHgEkIUEDW57+zkxZFSKBJ5Ntb64ag6KdwFWTGcTC321Vhe3tE7QbFlLsUWZ7Rynu4lgfAn9cz4b1SMNJRSc8cnhwz8I8tEoKNAEA1FFeClSUlkSci5HinB+ILlarEbUONeH5EKaKW+uHEy2HXPGtz/xjCPdUPxLouFQ20JNAkhjGT8qsKl3CtcZCDFb4Nrq2op1EJYaB/7TTXQJpRu5IwbTMNU/d5YJgkrc1gfvBnMPljrpbUVT5lsZ4Eay5kbzoPCorp2TxUsK/uj/ZeG5qOJDZaEP2KPh4svsVb/3GeiN3v7+Huy8a+tz+dr+LN7L323vYe9nPh3U3gPG/OhB6GCWgR5saqR1YdJX2a2WuS+OgAYM7aGFnyhyu6Si77rdOSueCo5iAh27FzZfl7Rn7r+g5MF/cDyKdASEQE1/P+sJUkrUTdjddTRdz1t3M4+mSTXZcWZyMjtKe/foLaLMbeg==)

Anybody else having the issues , or is something wrong with my code or system?

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [1 October 2025 14:36 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/4 "2025-10-01T14:36:25Z")

</div>

Works for me. I reduced the height of the colour area from 300px to 260px to stop a scroll bar but that was all

```auto
<template>
  <v-card style="margin: auto" width="400">
    <v-responsive
      :style="{ background: `rgb(${red}, ${green}, ${blue})` }"
      height="260px"
    ></v-responsive>

    <v-card-text>
      <v-slider
        v-model="red"
        :max="255"
        :step="1"
        class="ma-4"
        label="R"
        hide-details
      >
        <template v-slot:append>
          <v-text-field
            v-model="red"
            density="compact"
            style="width: 80px"
            type="number"
            variant="outlined"
            hide-details
          ></v-text-field>
        </template>
      </v-slider>

      <v-slider
        v-model="green"
        :max="255"
        :step="1"
        class="ma-4"
        label="G"
        hide-details
      >
        <template v-slot:append>
          <v-text-field
            v-model="green"
            density="compact"
            style="width: 80px"
            type="number"
            variant="outlined"
            hide-details
          ></v-text-field>
        </template>
      </v-slider>

      <v-slider
        v-model="blue"
        :max="255"
        :step="1"
        class="ma-4"
        label="B"
        hide-details
      >
        <template v-slot:append>
          <v-text-field
            v-model="blue"
            density="compact"
            style="width: 80px"
            type="number"
            variant="outlined"
            hide-details
          ></v-text-field>
        </template>
      </v-slider>
    </v-card-text>
  </v-card>
</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                red: 64,
                blue: 128,
                green: 10,
            }
        },
        watch: {
            // watch for any changes of "count"

        },
        computed: {
            // automatically compute this variable
            // whenever VueJS deems appropriate

        },
        methods: {
            // expose a method to our <template> and Vue Application

        },
        mounted() {
            // code here when the component is first loaded
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>
<style>
    /* define any styles here - supports raw CSS */

</style>

```

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [1 October 2025 20:56 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/5 "2025-10-01T20:56:07Z")

</div>

oh sorry, I should have been more specidic. The sliders do not work properly .. when sliding the textbox does not update

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [1 October 2025 21:16 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/6 "2025-10-01T21:16:43Z")

</div>

> [@xx\_Nexus\_xx](#):
>
> another example which does not work

Are you trying to use that example as-is? It uses the Composition API.

Dashboard 2 uses the Options API `export default {...}` not the Composition API. (good comparison [here](https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/))

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [1 October 2025 21:23 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/7 "2025-10-01T21:23:30Z")

</div>

Hi Steve, of course you are right ☹ ... I totally missed that tiny part , as I was not doing layouts for a while

---

<div class="post-metadata">

### Author: ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [1 October 2025 22:18 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/8 "2025-10-01T22:18:53Z")

</div>

Yep, that works also

---

<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: [15 October 2025 22:19 UTC](https://discourse.nodered.org/t/db2-vuetify-samples-not-working-anymore-in-ui-template/99226/9 "2025-10-15T22:19:37Z")

</div>

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