I'm trying to migrate from Vue2 to Vue3 of my project. It's a simple html project with Vue and having drag and drop table. It works fine in vue2 but not in vue3. Getting this error in console : "vue@next:8001 [Vue warn]: Failed to resolve component: draggable If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at "
<!DOCTYPE html>
<html lang="en" >
<meta charset="utf-8"/>
<head>
<script type="text/javascript" src="https://unpkg.com/vue@next"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-draggable-next.global.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>
<body>
<div id='myMain'>
<h2> {{ title }} </h2>
{{ title2 }}
<br><br>
<table>
<draggable :list="schoolInfo" >
<template v-for='(school, index) in schoolInfo' >
<tr>
<td>
<input v-model="school['name']">
</td>
<td>
<input v-model="school['address']" >
</td>
<td>
<input v-model="school['city']">
</td>
<td>
<input v-model="school['phone']" >
</td>
</tr>
</template>
</draggable>
</table>
</div>
<script>
const schoolData = Vue.createApp({
data() {
return {
title:"this is my school",
title2:'title2 here it iss',
schoolInfo: [
{ id: 0,
name:"school1",
address:"address1",
city:"city1",
phone:"phone1"
},
{ id: 1,
name:"school2",
address:"address2",
city:"city2",
phone:"phone2"
},
{ id: 3,
name:"school3",
address:"address3",
city:"city3",
phone:"phone3"
},
{ id: 4,
name:"school4",
address:"address4",
city:"city4",
phone:"phone4"
}
],
}
}
})
schoolData.component('draggable',VueDraggableNext)
schoolData.mount('#myMain')
</script>
</body>
</html>
Remove:
Add:
before
schoolData.mount('#myMain')This should resolve the component.