# Setting variables in uibuilder js file when using ESM client

**URL:** <https://discourse.nodered.org/t/setting-variables-in-uibuilder-js-file-when-using-esm-client/66332>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [11 August 2022 13:40 UTC](https://discourse.nodered.org/t/setting-variables-in-uibuilder-js-file-when-using-esm-client/66332 "2022-08-11T13:40:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![magicman](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@magicman](https://discourse.nodered.org/u/magicman)\
**Post date:** [11 August 2022 13:40 UTC](https://discourse.nodered.org/t/setting-variables-in-uibuilder-js-file-when-using-esm-client/66332/1 "2022-08-11T13:40:23Z")

</div>

When using the vue template at the top of the js file is this section:

const app = new Vue ({  
el:: `#app`,  
data() { return{  
var1: "abc",  
var2: "def",  
}},  
// end of data//

where i stored my variables and my initial settings for them but when using the modern ESM client that section is not there?  
is there a different method for setting these variables?  
i am new to all of this but am loving the concept of web components and experimenting

hope someone can help and apologise if this is a simple thing i overlooked

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [11 August 2022 18:14 UTC](https://discourse.nodered.org/t/setting-variables-in-uibuilder-js-file-when-using-esm-client/66332/2 "2022-08-11T18:14:10Z")

</div>

Currently, the only pre-defined templates for the new clients do not use any frameworks which is why the Vue part is not there. All you need to do is to combine the ESM template with the Vue template.

Additional templates will be made available eventually.

---

<div class="post-metadata">

**Author:** ![magicman](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@magicman](https://discourse.nodered.org/u/magicman)\
**Post date:** [11 August 2022 18:29 UTC](https://discourse.nodered.org/t/setting-variables-in-uibuilder-js-file-when-using-esm-client/66332/3 "2022-08-11T18:29:10Z")

</div>

Thanks for the reply @TotallyInformation I did think about combining them but was not sure.

thanks again

---

<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:** [25 August 2022 18:29 UTC](https://discourse.nodered.org/t/setting-variables-in-uibuilder-js-file-when-using-esm-client/66332/4 "2022-08-25T18:29:56Z")

</div>

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