Using custom components as wrap container

[cokuna-pavelkosolapov]

I am using the Vue.Draggable package and i want to set my own component as container based on property tag. It should work fine with strings like (div, span etc.), also with third-party components like el-collapse.

But it doesn't work with custom components which wasn't registered globally.

My suggestion, make it possible to provide custom component as variable (result of import function). Should work like this:

<template>
  <draggable v-model="list" :tag="CustomWrapper">
    <div v-for="el in list" :key="el.id">{{el.name}}</div>
  </draggable>
</template>

import Draggable from 'vuedraggable'

export default {
  name: 'CustomName',
  props: { list: Array },
  data: () {
    return {
      CustomWrapper: () => import('./some-path/CustomWrapper')
    }
  },
  components: { Draggable }
}

and here is my custom-wrapper.vue just in case:

<template>
    <div class="custom-wrapper"><slot /></div>
</template>

<script>
export default {
    name: "CustomWrapper"
}
</script>

[Simon7520]

<vuedraggable tag="CustomWrapper">
    <div v-for="item in list" :key="item.id">
    </div>
</vuedraggable>

import Vue from 'vue'
import CustomWrapper from './CustomWrapper.vue'
Vue.component("CustomWrapper", CustomWrapper)

这样就可以使用自定义组件作为容器了

[cokuna-pavelkosolapov]

Thank you for your answer. Like i said, i would like to use it without globally registration, in my example as a function which returns a promise, which resolves a component object

CustomWrapper: () => import('./some-path/CustomWrapper')

[cryzzchen]

Thank you for your answer. Like i said, i would like to use it without globally registration, in my example as a function which returns a promise, which resolves a component object

CustomWrapper: () => import('./some-path/CustomWrapper')

I have a same problem, can you tell me how to resolve it

[cokuna-pavelkosolapov]

@cryzzchen i didn't... Atm. switched to the vue 3