How to use Vue.Draggable CDN without webpack?

Question

I’m a newbie on Vue. One of the pages (salesview) on my client’s CodeIgniter website needs to use Vue so I included it by

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

and I declared Vue and its components in a file called salesview.js. Now, I need to use the Vue.Draggable component. I added it to the page like so:

<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

Since I’m not using webpack, how can I use this component?

Roentgenology

Can you explain how you've tried to use it so far? The way you use it should be the same with or without webpack. – Cameleer

Answer 1

I solved my problem by accessing vuedraggable from the window object and added it to the components options, like so:

var vm = new Vue({
    el: '#app',
  components: {
    'sv-lead-column': svLeadColumn,
    'sv-customer-column': svCustomerColumn,
    draggable: window['vuedraggable']
  },
  ...
})

Roentgenology

Thank you! The community has left us newbies out with their 'use steps' that take many things for granted. I want to try to do a very simple app/web without thousands of dependant files and a bunch of builders (vue cli, webpack, npm, yarn, minifiers...) and a Node server. :(( – Sturges