4

I am newbee at vuejs. I have a website and i want to use vuejs in some page. The page is built by laravel, jquery etc. and I want to use vuejs draggable component at particular area in that page.

https://kutlugsahin.github.io/vue-smooth-dnd

https://github.com/SortableJS/Vue.Draggable

Everyone said that Vuejs is good to easily start at running services. But not for me. I want to use above vue component in my existing HTML page without a WebPack build process.

That means, i will use only

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

and just plain html and js. (if possible, not use import things)

I read the article How to use a VueJS .vue component in a HTML page without a WebPack build process?,

They said "poi" is the best solution. At last of the answer, they said that i have to use "import Component from ...".

I cant not use "import" at my current plain html page. (cause i do not use webpack etc)

Is there someone to tell me real solution easily?

Lawyer Kenny
  • 363
  • 4
  • 16

1 Answers1

4

If you do not use Webpack then you can just include the .js files into your HTML page - either use CDN or local files (you can get them by entering bellow links and save as..):

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

Quick example:

var vm = new Vue({
  el: '#app',

  data() {
    return {
      list: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF']
    };
  }
});
body {
  font-family: "Open Sans", sans-serif;
}

.drag-container {
  margin: 5px 10px;
  display: flex;
}

.drag-item {
  border: 1px solid grey;
  padding: 2px;
  margin: 5px;
  cursor: move;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

<div id="app">
  <h1>Vue Dragable Test</h1>

  <draggable :list="list" class="drag-container">
    <div v-for="item in list" class="drag-item">{{ item }}</div>
  </draggable>

</div>
andris.vilde
  • 178
  • 5
  • Thank you for your answer. Actually I found that even if it's late the official way is the best way. For all people read this article, I recommend reading the official site 10 times. – Lawyer Kenny Sep 10 '18 at 11:42
  • If you share the complete code samples it will be helpful for those who starts Vue new. I meant complete HTML file. – saravanakumar Feb 06 '20 at 06:05
  • The important part not-to-forget is to include sortable.js as well. I cannot find that in the documentation anywhere. – L.A. Rabida Jul 15 '20 at 13:53