Errors with @vue/compat

[davidwessman]

Hello!

I am trying to migrate from Vue 2 to Vue 3 and currently running:

• vue: 3.3.4
• @vue/compat: 3.3.4
• vue-easy-dnd: 2.1.3

MODE: 2

<drop-list
  :items="localMeetings"
  :no-animations="true"
  class="list-group list-group-flush"
  @reorder="reorderItems"
>
  <template #item="item">
    <drag :key="item.number" class="item" handle=".handle">
      {{ item }}
    </drag>
  </template>
 </drop-list>

If I set

compatConfig: {
  MODE: 2
}

then I get the error

Uncaught TypeError: this.$slots.item is not a function

which makes sense since you are not supporting Vue 2 anymore.

MODE: 3

If I switch to:

<drop-list
  :items="localMeetings"
  :no-animations="true"
  class="list-group list-group-flush"
  @reorder="reorderItems"
>
  <template #item="{item}">
    <drag :key="item.number" class="item" handle=".handle">
      {{ item }}
    </drag>
  </template>
 </drop-list>

compatConfig: {
  MODE: 3
}

then I get the error:

Cannot destructure property 'item' of 'undefined' as it is undefined.

I am not sure what is required by a library to work with @vue/compat, would be greatful for any help.

[GhostNr1]

What I did when I was doing our migration was to do

setup() {
    DragList.compatConfig = {
      MODE: 3
    };
    Drag.compatConfig = {
      MODE: 3
    };
  },

And run everything else under MODE: 2. Every component that is vue3 ready you can do this with until the current component you are working with are fully Vue3 compatible and change that component to.
I never get it working with {} in item so I do it like this now

<drop-list
            :items="localMeetings"
            class="someClasses"
            @reorder="meetingMoved($event)"
          >
            <template #item="subTask">
              <drag
                :key="subTask.item.uuid"
                class="subtaskClass"
              >
                <div
                  :key="subTask.item.uuid"

Hope this can help someone that is in the same situation when they need to change one 3:rd party component that need to be run in MODE: 3 and not 2 but the first component isn't compatible yet.

[davidwessman]

Thank you @GhostNr1, will try it out!

Edit:

Worked like a charm!
@rlemaigre would it make sense to add something about this to the documentation?