How To Use Vuedraggable In VueJs

In this article, We will learn how to use vuedraggable

Step 1: Create new Vue project:

vue create draggable-demo

Step 2: Install require package:

npm i vuedraggable@next

Step 3: Open App.vue and add the following in it:

  <h1>Draggable Demo</h1>
  <draggable v-model="fruits" tag="ul"><template #item="{ element: fruit }">
      <li>{{ fruit }}</li>

<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
const fruits = ref(["Apple", "Mango", "Banana", "Orange", "Pineapple", "Grapes"]);

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  text-decoration: none;
  display: block;

Code in Action:



Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories