# How to achieve component feature in template node

**URL:** <https://discourse.nodered.org/t/how-to-achieve-component-feature-in-template-node/98924>\
**Category:** Dashboard\
**Created:** [3 September 2025 11:21 UTC](https://discourse.nodered.org/t/how-to-achieve-component-feature-in-template-node/98924 "2025-09-03T11:21:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kang](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@Kang](https://discourse.nodered.org/u/Kang)\
**Post date:** [3 September 2025 11:21 UTC](https://discourse.nodered.org/t/how-to-achieve-component-feature-in-template-node/98924/1 "2025-09-03T11:21:41Z")

</div>

Hi,

I want to use item-card to duplicate the self-designed item in template node of dashboard v2, but it does not work as I expected, here is my code, is there something wrong with it?

```flows
<template>
    <div id="app">
        <item-card v-for="(item, index) in items" :key="index" :index="index+1" :title="item.title" :speed="item.speed">
        </item-card>
    </div>
</template>

<script>
  const ItemCard = {
    props: ['index', 'title', 'speed'],
    template: `
      <div class="item-card" @click="toggle">
        <div class="left">{{ index }}</div>
        <div class="middle">
          <div class="title">{{ title }}</div>
          <div class="desc">Speed: {{ speed }} mm/s</div>
        </div>
      </div>
    `,
    methods: {
      toggle() {
        console.log('Click ' + this.index);
      }
    }
  };

  const app = Vue.createApp({
    data() {
      return {
        items: [
          { title: "Card A", speed: 100 },
          { title: "Card B", speed: 200 },
          { title: "Card C", speed: 300 }
        ]
      }
    }
  });

  app.component('item-card', ItemCard);

  app.mount("#app");
</script>

<style>
    .item-card {
        display: flex;
        border: 1px solid #ccc;
        border-radius: 8px;
        margin: 5px;
        padding: 10px;
        cursor: pointer;
    }

    .left {
        font-weight: bold;
        margin-right: 10px;
    }

    .middle {
        flex-grow: 1;
    }

    .title {
        font-size: 16px;
        font-weight: bold;
    }

    .desc {
        font-size: 14px;
        color: gray;
    }
</style>

```

---

<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:** [3 September 2025 11:45 UTC](https://discourse.nodered.org/t/how-to-achieve-component-feature-in-template-node/98924/2 "2025-09-03T11:45:59Z")

</div>

Firstly, dashboard 2 creates the vue environment so calling Vue.createApp is neither recommended nor supported.

What's wrong with using the v-card components that are already built in. Have you read the extensive dashboard documentation which as it happens links off to the vuetify documentation where v-card is heavily documented with examples?

---

<div class="post-metadata">

**Author:** ![Kang](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@Kang](https://discourse.nodered.org/u/Kang)\
**Post date:** [3 September 2025 12:17 UTC](https://discourse.nodered.org/t/how-to-achieve-component-feature-in-template-node/98924/3 "2025-09-03T12:17:50Z")

</div>

Hi, Steve

Where is the extension documentation you mentioned? I could not find related vue documentation in Node-RED website. And I actually did not know about the v-card feature for component.

---

<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:** [3 September 2025 12:21 UTC](https://discourse.nodered.org/t/how-to-achieve-component-feature-in-template-node/98924/4 "2025-09-03T12:21:12Z")

</div>

> [@Kang](#):
>
> Where is the extension documentation you mentioned

Extensive not extension. Documentation for node-red dashboard is linked in many places within the nodes and the flows site but here you go: [https://dashboard.flowfuse.com/](https://dashboard.flowfuse.com/). In particular the template node docs: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template)

---

<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:** [17 September 2025 12:22 UTC](https://discourse.nodered.org/t/how-to-achieve-component-feature-in-template-node/98924/5 "2025-09-17T12:22:06Z")

</div>

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