# How to import vuedraggable in UI Builder

**URL:** <https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552>\
**Category:** Dashboard\
**Created:** [30 September 2020 09:31 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552 "2020-09-30T09:31:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![witbankDeveloper](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@witbankDeveloper](https://discourse.nodered.org/u/witbankDeveloper)\
**Post date:** [30 September 2020 09:31 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/1 "2020-09-30T09:31:42Z")

</div>

I am trying to add a library, [vuedraggable](https://codesandbox.io/s/animated-draggable-kanban-board-with-tailwind-and-vue-1ry0p?ref=madewithvuejs.com), into my uibuilder for the KanBan feature.

The classic "import draggable from 'vuedraggable'" inside `index.js` is giving me the following error:  
**Uncaught SyntaxError: Cannot use import statement outside a module**

I have tried many things, but there seems to be no way for me to make this happen:(

To have this feature working would really be beneficial and make any UI experiences next level!

Thank you in advance!  
Christo Deyzel

---

<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:** [30 September 2020 11:18 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/2 "2020-09-30T11:18:25Z")

</div>

Hi,

yes .. imports dont work if you are not using a build step to bundle you app like webpack or parcel.

Try to use the **direct cdn links** instead in your html code as described on the [Github](https://github.com/SortableJS/Vue.Draggable#with-direct-link) website of vuedraggable

```auto
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

```

---

<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:** [30 September 2020 15:08 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/3 "2020-09-30T15:08:13Z")

</div>

> [@UnborN](#):
>
> imports dont work if you are not using a build step to bundle you app like webpack or parcel.

To be clear, imports _DO_ work but only if you make your index.js a module by indicating such on the `<script>` tag. This is documented in the WIKI.

However, using the browser version is easier as indicated. If the component has been built properly, you shouldn't need to actually reference the file name. Try using unpkg.js rather than cdnjs. But also, if you have installed the module, you can change the ref from cdnjs to `../uibuilder/vendor/......`

---

<div class="post-metadata">

**Author:** ![witbankDeveloper](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@witbankDeveloper](https://discourse.nodered.org/u/witbankDeveloper)\
**Post date:** [30 September 2020 15:10 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/4 "2020-09-30T15:10:52Z")

</div>

I appreciate the speedy response UnborN!!

I just tried using the **direct cdn links** in the `html`. I am getting the following error:  
_Uncaught SyntaxError: The requested module '[https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js](https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js)' does not provide an export named 'draggable'_

I am going to try Totallyinformation's suggestion..

---

<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:** [30 September 2020 16:17 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/5 "2020-09-30T16:17:53Z")

</div>

> [@TotallyInformation](#):
>
> To be clear, imports _DO_ work but only if you make your index.js a module by indicating such on the `<script>` tag. This is documented in the WIKI.

Opps .. forgot about that .. i think i blocked it from my memory because at the time i was straggling with Vue Single File Components using http-vue-loader and possibly it was http-vue-loader that had the issue with imports?! 😉

Anyway not to sidetrack the thread :

#### [Load Vue components without a build step (modern browsers only)](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Load-Vue-components-without-a-build-step-(modern-browsers-only))

#### [JavaScript modules ( Applying the module to your HTML)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

---

<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:** [30 September 2020 16:30 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/6 "2020-09-30T16:30:05Z")

</div>

You are right that http-vue-loader does not enable imports. It provides an alternative where you can load a .vue file remotely.

Using web components (e.g. the module setting that allows imports) means that you cannot use any version of IE or older browsers. However, support for most browsers, including mobile ones, is now very good. But not useful if you are stuck using an old Android tablet or phone as an extra display/controller.

---

<div class="post-metadata">

**Author:** ![witbankDeveloper](https://avatars.discourse-cdn.com/v4/letter/w/8dc957/32.png) [@witbankDeveloper](https://discourse.nodered.org/u/witbankDeveloper)\
**Post date:** [30 September 2020 17:01 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/7 "2020-09-30T17:01:22Z")

</div>

Thank you TotallyInformation, the `../uibuilder/vendor/......` with the `script` solved the error!

Also thank you for the UI Builder node!! You have made my life very simple!!

---

<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:** [14 October 2020 17:01 UTC](https://discourse.nodered.org/t/how-to-import-vuedraggable-in-ui-builder/33552/8 "2020-10-14T17:01:38Z")

</div>

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