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?

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']
  },
  ...
})