rosssjawake
@rosssjawake
Основатель Matomba.ru

Как использовать компонент vue3-draggable без сборщиков?

Пытаюсь добавить компонент vueDraggable в свой проект на vue3 написанный на php без сборщиков и прочего. Включаю Draggable через CDN:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-draggable@2.0.9/dist/vue3-draggable.umd.min.js"></script>

Добавляю компонент и монтирую все:

const app = Vue.createApp({});
app.component('draggable', window['vue3-draggable']);
app.mount('#app');

Получаю ошибку:

vue.global.js:2260 [Vue warn]: Component is missing template or render function:  Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 'Module'}default: components: DraggableItem: name: "DraggableItem"props: {item: ƒ, position: ƒ, containerId: ƒ}containerId: ƒ Number()item: ƒ Object()position: ƒ Number()[[Prototype]]: Objectrender: ƒ (t,e,n,r,o,i)length: 6name: ""prototype: {}arguments: (…)caller: (…)[[FunctionLocation]]: vue3-draggable.umd.min.js:1[[Prototype]]: ƒ ()[[Scopes]]: Scopes[4]setup: ƒ (t,e)__scopeId: "data-v-2fc82866"[[Prototype]]: Object[[Prototype]]: Objectcomputed: {transitionStyle: ƒ}name: "Draggable"props: {transition: {…}, modelValue: ƒ}render: ƒ (t,e,n,r,o,i)setup: ƒ (t,e)__scopeId: "data-v-2fb1486c"[[Prototype]]: Object__esModule: trueSymbol(Symbol.toStringTag): "Module"[[Prototype]]: Object 
  at <Draggable modelValue= (5) [{…}, {…}, {…}, {…}, {…}] onUpdate:modelValue=fn<onUpdate:modelValue> item-key="id" > 
  at <EstateEditGallery> 
  at <EstateEdit key="estate-edit" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="popup" mode="out-in" > 
  at <App>

Как исправить?
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
- app.component('draggable', window['vue3-draggable']);
+ app.component('draggable', window['vue3-draggable'].default);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы