Nuxt3 Support

[jimmiejackson414]

Thanks for the awesome library! I was able to quickly get a very basic version working.

I have multiple tables in a vertical column, and I'm trying to enable drag and drop between tables. Once I added the group prop to the SlickList component however, I received a console error: vue-slicksort.js?v=33c1751e:350 Uncaught (in promise) Error: Slicksort plugin required to use "group" prop.

I created a file in plugins/slickSort.client.ts and added this:

import { DragHandle, SlickList, SlickItem } from 'vue-slicksort';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('SlickList', SlickList);
  nuxtApp.vueApp.component('SlickItem', SlickItem);
  nuxtApp.vueApp.component('SlickHandle', DragHandle);
});

And here is a minimal representation of how I'm using it:

  import { DragHandle, SlickList, SlickItem } from 'vue-slicksort';

<slick-list
  v-model:list="rows"
  axis="y"
  group="category-items"
  lock-axis="y"
  tag="tbody"
  :transition-duration="250"
  use-drag-handle>
  <slick-item
    v-for="( row, i ) in rows"
    :key="row.id"
    class="bg-white hover:bg-gray-50 border-b last:border-0 duration-150 ease-expo group transition"
    :index="i"
    tag="tr">
    <drag-handle
      class="px-2 py-4"
      tag="th">
      <grip-vertical-icon class="cursor-move group-hover:opacity-100 h-4 opacity-0 text-gray-400 w-4" />
    </drag-handle>
    ...rest of code
  </slick-item>
</slick-list>

Any idea how to get this working with Nuxt3, if it's even possible?

[jimmiejackson414]

I'm not sure why when I searched for nuxt in the issues earlier that the other topic didn't show up, but it appears that #157 is the answer!