How to import vuedraggable in UI Builder

[witbankDeveloper]

I am trying to add a library, vuedraggable, 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

[UnborN]

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 website of vuedraggable

<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>

[TotallyInformation]

@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/......

[witbankDeveloper]

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' does not provide an export named 'draggable'

I am going to try Totallyinformation's suggestion..

[UnborN]

@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)

JavaScript modules ( Applying the module to your HTML)

[TotallyInformation]

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.

[witbankDeveloper]

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!!