# Migrating ui template from Dashboard-1 to Dashboard-2

**URL:** <https://discourse.nodered.org/t/migrating-ui-template-from-dashboard-1-to-dashboard-2/92891>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [4 November 2024 06:58 UTC](https://discourse.nodered.org/t/migrating-ui-template-from-dashboard-1-to-dashboard-2/92891 "2024-11-04T06:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 2

<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:** [4 November 2024 07:44 UTC](https://discourse.nodered.org/t/migrating-ui-template-from-dashboard-1-to-dashboard-2/92891/2 "2024-11-04T07:44:03Z")

</div>

> [@krambriw](#):
>
> assume it is those parts where I'm using the scope in the javascripts and the ng-click in the html that needs to be replaced somehow. Any suggestions

Start your adventure armed with this knowledge:

Dashboard 2 uses Vue 3 [Options API](https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/) and [Vuetify](https://vuetifyjs.com/en/components/all/#containment) component framework  
You don't need all that ugly "xxx"+scope.$id stuff and there is no jQuery. Instead of applying `id`s to your components you use `ref` instead. [Vue 'ref' Attribute](https://www.w3schools.com/vue/ref_ref.php)

On top of what I wrote here: [Subflow - UI Group - #11 by Steve-Mcl](https://discourse.nodered.org/t/subflow-ui-group/92068/11) , most things have an immediate alternative. e.g. `md-button` becomes `v-btn` and the docs for `v-btn` are here: [Button component — Vuetify](https://vuetifyjs.com/en/components/buttons/#usage)

Lastly, the docs for dashboard 2 are pretty decent: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html)

---

_[View the full topic](https://discourse.nodered.org/t/migrating-ui-template-from-dashboard-1-to-dashboard-2/92891)._