5

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/sortablejs@1.8.4/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?

Esthon Wood
  • 315
  • 3
  • 19
  • 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. – Shoejep May 04 '20 at 07:14

1 Answers1

12

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']
  },
  ...
})
Esthon Wood
  • 315
  • 3
  • 19
  • 3
    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. :(( – Ivan Ferrer Villa Jul 16 '21 at 18:17