# How do I do this to work with template node

**URL:** <https://discourse.nodered.org/t/how-do-i-do-this-to-work-with-template-node/92971>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [7 November 2024 14:45 UTC](https://discourse.nodered.org/t/how-do-i-do-this-to-work-with-template-node/92971 "2024-11-07T14:45:16Z")\
**Posts on this page:** 4\
**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:** [7 November 2024 14:45 UTC](https://discourse.nodered.org/t/how-do-i-do-this-to-work-with-template-node/92971/1 "2024-11-07T14:45:16Z")

</div>

Here is the code from

[https://vuetifyjs.com/en/components/buttons/#dialog-action](https://vuetifyjs.com/en/components/buttons/#dialog-action)

```auto
<template>
  <v-sheet
    class="position-relative"
    min-height="450"
  >
    <div class="position-absolute d-flex align-center justify-center w-100 h-100">
      <v-btn
        color="deep-purple-darken-2"
        size="x-large"
        @click="dialog = !dialog"
      >
        Open Dialog
      </v-btn>
    </div>

    <v-fade-transition hide-on-leave>
      <v-card
        v-if="dialog"
        append-icon="$close"
        class="mx-auto"
        elevation="16"
        max-width="500"
        title="Send a receipt"
      >
        <template v-slot:append>
          <v-btn icon="$close" variant="text" @click="dialog = false"></v-btn>
        </template>

        <v-divider></v-divider>

        <div class="py-12 text-center">
          <v-icon
            class="mb-6"
            color="success"
            icon="mdi-check-circle-outline"
            size="128"
          ></v-icon>

          <div class="text-h4 font-weight-bold">This receipt was sent</div>
        </div>

        <v-divider></v-divider>

        <div class="pa-4 text-end">
          <v-btn
            class="text-none"
            color="medium-emphasis"
            min-width="92"
            variant="outlined"
            rounded
            @click="dialog = false"
          >
            Close
          </v-btn>
        </div>
      </v-card>
    </v-fade-transition>
  </v-sheet>
</template>
<script setup>
  import { ref } from 'vue'

  const dialog = ref(true)
</script>

```

---

<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:** [7 November 2024 15:04 UTC](https://discourse.nodered.org/t/how-do-i-do-this-to-work-with-template-node/92971/2 "2024-11-07T15:04:39Z")

</div>

> [@xlameee](#):
>
> ```auto
> import { ref } from 'vue'
> 
> const dialog = ref(true)
> 
> ```

Dont do this. That is Vue 3 composition API. Instead use the Options API

* * *

When you drop ui-template onto the Node-RED editor, it comes pre-set with working VUE code - adapt that to your code.

Also, refer to the documentation: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#example-full-vue-component)

---

<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:** [7 November 2024 22:25 UTC](https://discourse.nodered.org/t/how-do-i-do-this-to-work-with-template-node/92971/3 "2024-11-07T22:25:01Z")

</div>

Something like that

```auto
<script>
export default {
  data() {
    return {
      dialog: false
    }
  },
  methods: {
    toggleDialog() {
      this.dialog = !this.dialog;
    },
    closeDialog() {
      this.dialog = false;
    }
  }
}
</script>

```

---

<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:** [21 November 2024 22:25 UTC](https://discourse.nodered.org/t/how-do-i-do-this-to-work-with-template-node/92971/4 "2024-11-21T22:25:57Z")

</div>

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