# Dashboard2 template node script loading?

**URL:** <https://discourse.nodered.org/t/dashboard2-template-node-script-loading/88296>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [27 May 2024 11:22 UTC](https://discourse.nodered.org/t/dashboard2-template-node-script-loading/88296 "2024-05-27T11:22:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dth](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dth/32/72723_2.png) [@dth](https://discourse.nodered.org/u/dth)\
**Post date:** [27 May 2024 11:22 UTC](https://discourse.nodered.org/t/dashboard2-template-node-script-loading/88296/1 "2024-05-27T11:22:53Z")

</div>

I am trying to embed a vega-lite chart with the template node. But it seems there is a problem with loading multiple dependencies, which depend on each other.

Specifically:

```auto
    <script src="https://cdn.jsdelivr.net/npm/vega@5.28.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.18.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.25.0"></script>

```

The second file fails - presumably, because the first is not loaded yet, when it is loaded itself. Is there any way to control this better?

The "setInterval" trick works fine for one external dependency, but I hope I don't have to inject the scripts myself, after giving each time to load?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [27 May 2024 13:34 UTC](https://discourse.nodered.org/t/dashboard2-template-node-script-loading/88296/2 "2024-05-27T13:34:57Z")

</div>

> [@dth](#):
>
> Is there any way to control this better?

I was interested in this also .. Loading external scripts in a cleaner way than a timer.  
Try this method ..

```auto
      mounted() {

            [
            'https://cdn.jsdelivr.net/npm/vega@5.28.0',
            'https://cdn.jsdelivr.net/npm/vega-lite@5.18.1',
            'https://cdn.jsdelivr.net/npm/vega-embed@6.25.0'
            ].forEach(function(src) {
            var script = document.createElement('script');
            script.src = src;
            script.async = false;
            document.head.appendChild(script);
            });

        },

```

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [27 May 2024 15:25 UTC](https://discourse.nodered.org/t/dashboard2-template-node-script-loading/88296/3 "2024-05-27T15:25:23Z")

</div>

Did you try to add the `defer` attribute to all script tags ?

---

<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:** [10 June 2024 15:26 UTC](https://discourse.nodered.org/t/dashboard2-template-node-script-loading/88296/4 "2024-06-10T15:26:16Z")

</div>

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