# Importing components from separate node vue vuetify dashboard 2

**URL:** https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590
**Category:** Dashboard
**Tags:** docker, dashboard-2
**Created:** [22 October 2024 19:13 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590 "2024-10-22T19:13:12Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)
#### Post date: [22 October 2024 19:13 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/1 "2024-10-22T19:13:12Z")

</div>

My setup:  
Node-RED inside the docker container  
Palette @flowfuse/node-red-dashboard

Hello

I have a quick question

Let say I have 4 node in my flow

Inject node - every 1s  
function node sending data to the table  
template 1 node - tab template - tab1 - tab2 - tab3  
template 2 node - table template

I need to render table template into one of the tabs  
Here is the example code for the tab template node

```auto
<template>
  <v-card>
    <v-tabs
      v-model="tab"
      bg-color="primary"
    >
      <v-tab value="one">Item One</v-tab>
      <v-tab value="two">Item Two</v-tab>
      <v-tab value="three">Item Three</v-tab>
    </v-tabs>

    <v-card-text>
      <v-tabs-window v-model="tab">
        <v-tabs-window-item value="one">
          One
        </v-tabs-window-item>

        <v-tabs-window-item value="two">
          Two
        </v-tabs-window-item>

        <v-tabs-window-item value="three">
          Three
        </v-tabs-window-item>
      </v-tabs-window>
    </v-card-text>
  </v-card>
</template>
<script>
  export default {
    data: () => ({
      tab: null,
    }),
  }
</script>

```

Here is the example for table node

```auto
<template>
  <v-data-table-server
    v-model:items-per-page="itemsPerPage"
    :headers="headers"
    :items="serverItems"
    :items-length="totalItems"
    :loading="loading"
    item-value="name"
    @update:options="loadItems"
  ></v-data-table-server>
</template>
<script>
  const desserts = [
    {
      name: 'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      iron: '1',
    },
    {
      name: 'Jelly bean',
      calories: 375,
      fat: 0.0,
      carbs: 94,
      protein: 0.0,
      iron: '0',
    },
    {
      name: 'KitKat',
      calories: 518,
      fat: 26.0,
      carbs: 65,
      protein: 7,
      iron: '6',
    },
    {
      name: 'Eclair',
      calories: 262,
      fat: 16.0,
      carbs: 23,
      protein: 6.0,
      iron: '7',
    },
    {
      name: 'Gingerbread',
      calories: 356,
      fat: 16.0,
      carbs: 49,
      protein: 3.9,
      iron: '16',
    },
    {
      name: 'Ice cream sandwich',
      calories: 237,
      fat: 9.0,
      carbs: 37,
      protein: 4.3,
      iron: '1',
    },
    {
      name: 'Lollipop',
      calories: 392,
      fat: 0.2,
      carbs: 98,
      protein: 0,
      iron: '2',
    },
    {
      name: 'Cupcake',
      calories: 305,
      fat: 3.7,
      carbs: 67,
      protein: 4.3,
      iron: '8',
    },
    {
      name: 'Honeycomb',
      calories: 408,
      fat: 3.2,
      carbs: 87,
      protein: 6.5,
      iron: '45',
    },
    {
      name: 'Donut',
      calories: 452,
      fat: 25.0,
      carbs: 51,
      protein: 4.9,
      iron: '22',
    },
  ]

  const FakeAPI = {
    async fetch ({ page, itemsPerPage, sortBy }) {
      return new Promise(resolve => {
        setTimeout(() => {
          const start = (page - 1) * itemsPerPage
          const end = start + itemsPerPage
          const items = desserts.slice()

          if (sortBy.length) {
            const sortKey = sortBy[0].key
            const sortOrder = sortBy[0].order
            items.sort((a, b) => {
              const aValue = a[sortKey]
              const bValue = b[sortKey]
              return sortOrder === 'desc' ? bValue - aValue : aValue - bValue
            })
          }

          const paginated = items.slice(start, end)

          resolve({ items: paginated, total: items.length })
        }, 500)
      })
    },
  }

  export default {
    data: () => ({
      itemsPerPage: 5,
      headers: [
        {
          title: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          key: 'name',
        },
        { title: 'Calories', key: 'calories', align: 'end' },
        { title: 'Fat (g)', key: 'fat', align: 'end' },
        { title: 'Carbs (g)', key: 'carbs', align: 'end' },
        { title: 'Protein (g)', key: 'protein', align: 'end' },
        { title: 'Iron (%)', key: 'iron', align: 'end' },
      ],
      serverItems: [],
      loading: true,
      totalItems: 0,
    }),
    methods: {
      loadItems ({ page, itemsPerPage, sortBy }) {
        this.loading = true
        FakeAPI.fetch({ page, itemsPerPage, sortBy }).then(({ items, total }) => {
          this.serverItems = items
          this.totalItems = total
          this.loading = false
        })
      },
    },
  }
</script>

```

I tried doing this with chatgpt but its little confuse 😀 😀

I wonder if that can even be done or I have to merge them into a single template node

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [22 October 2024 20:37 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/2 "2024-10-22T20:37:25Z")

</div>

Hi @xlameee welcome to the node-RED community forum.

Your title `@flowfuse/node-red-dashboard` does not give us a clue about what the subject of your post is about.  
Could you please change your topic title using the pencil icon next to the title, to something that summarises your issue in a few words, and would help others in the future searching the forum.

Thanks

---

<div class="post-metadata">

### Author: ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)
#### Post date: [23 October 2024 16:54 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/3 "2024-10-23T16:54:42Z")

</div>

Is that more understandable?

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [23 October 2024 17:14 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/4 "2024-10-23T17:14:55Z")

</div>

Yes, thank you 👍

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [23 October 2024 17:16 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/5 "2024-10-23T17:16:56Z")

</div>

It would need to be a single `ui-template` node, and you would not be able to define content _outside_ of the `export default` in your script.

The `desserts` variable can be added to the `data ()` list in your component definition, and I see no point with the `FakeAPI` separation that ChatGPT has provided you, it can just be integrated into the `loadItems` function directly.

---

<div class="post-metadata">

### Author: ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)
#### Post date: [24 October 2024 02:40 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/6 "2024-10-24T02:40:48Z")

</div>

Thanks but this is not chat GPT it is from here example

> **[Tabs component — Vuetify](https://vuetifyjs.com/en/components/tabs/#align-tabs)**
>
> The tabs component provides a way to organize and navigate between groups of content that are related at the same le...

---

<div class="post-metadata">

### Author: ![xlameee](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xlameee](https://discourse.nodered.org/u/xlameee)
#### Post date: [24 October 2024 17:22 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/7 "2024-10-24T17:22:08Z")

</div>

Works like charm 😀 😃 😃 😃 😃

---

<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: [7 November 2024 17:22 UTC](https://discourse.nodered.org/t/importing-components-from-separate-node-vue-vuetify-dashboard-2/92590/8 "2024-11-07T17:22:18Z")

</div>

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