### Registering Vue 3 Sortablejs via npm

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

Shows how to install the vue3-sortablejs package using npm and register it as a plugin within a Vue application, typically in `App.vue`.

```sh
npm install --save vue3-sortablejs
```

```js
import VueSortable from "vue3-sortablejs";

app.use(VueSortable);
```

--------------------------------

### Basic Usage with CDN

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

Demonstrates how to use Vue 3 Sortablejs by including it via CDN in an HTML file. It shows the setup of a Vue application and the application of the `v-sortable` directive to a div for drag-and-drop functionality.

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://unpkg.com/vue3-sortablejs/dist/vue3-sortablejs.global.js"></script>

<div id="app">
  <div v-sortable>
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
</div>

<script>
  const { createApp } = Vue;

  const app = createApp();

  app.use(sortablejs);

  app.mount("#app");
</script>
```

--------------------------------

### Configuring v-sortable with options

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

Demonstrates how to pass configuration options to the `v-sortable` directive. This example shows how to disable drag-and-drop and set SortableJS specific options like animation duration and easing.

```html
<template>
  <div v-sortable="{ disabled: false, options: { animation: 250, easing: 'cubic-bezier(1, 0, 0, 1)' } }">
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
</template>
```

--------------------------------

### Handling SortableJS events in Vue

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

Provides an example of how to listen to SortableJS events within a Vue component. It shows how to use the `@ready` event to access the Sortable instance and the `@end` event to capture changes in item order.

```html
<template>
  <div v-sortable @ready="onReady" @end="onOrderChange">
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
</template>

<script>
export default {
  methods: {
    onReady(event) {
      console.log(event.sortable);
    },

    onOrderChange(event) {
      console.log(event.oldIndex);
      console.log(event.newIndex);
    }
  }
};
</script>
```

--------------------------------

### Set Key on Children Items

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

This example shows the recommendation to set a `key` attribute on the children items within a sortable container. This helps Sortable.js accurately track the DOM elements during reordering operations.

```html
<template>
  <div v-sortable>
    <div key="a">a</div>
    <div key="b">b</div>
    <div key="c">c</div>
  </div>
</template>
```

--------------------------------

### Set Key on Parent with Group Option

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

This example illustrates the importance of setting a `key` on the parent element when using the `group` option in Sortable.js. The key should be based on the number of items in the parent to force re-renders and ensure Sortable re-initializes correctly, keeping the DOM in sync with the data state.

```html
<template>
  <h1>Foo</h1>

  <div v-sortable="{ options: { group: 'items' } }" @end="onOrderChange" :key="fooItems.length">
    <div v-for="item in fooItems" :key="item">
      {{ item }}
    </div>
  </div>

  <h1>Bar</h1>

  <div v-sortable="{ options: { group: 'items' } }" @end="onOrderChange" :key="barItems.length">
    <div v-for="item in barItems" :key="item">
      {{ item }}
    </div>
  </div>
</template>
```

```javascript
export default {
  methods: {
    onOrderChange(event) {
      // Mutate fooItems and barItems
    }
  }
};
```

--------------------------------

### Mutate Data Order After Drop

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

This example demonstrates how to update the data array in Vue.js after an item is dropped in a sortable list. It uses the `splice` method to remove the item from its old index and insert it at the new index, ensuring the data order reflects the DOM order.

```html
<template>
  <div v-sortable @end="onOrderChange">
    <div v-for="item in items">
      {{ item }}
    </div>
  </div>

  <span>Items data: {{ items }}</span>
</template>
```

```javascript
export default {
  data() {
    return {
      items: [ "a", "b", "c" ]
    }
  },

  methods: {
    onOrderChange(event) {
      // Remove item from old index
      let item = this.items.splice(event.oldIndex, 1)[0];

      // Insert it at new index
      this.items.splice(event.newIndex, 0, item);
    }
  }
};
```

--------------------------------

### Using v-sortable directive in a Vue component

Source: https://github.com/eliottvincent/vue3-sortablejs/blob/master/README.md

Illustrates the usage of the `v-sortable` directive within a Vue component's template after the plugin has been registered. This allows for drag-and-drop functionality on the targeted element.

```html
<template>
  <h1>My Component</h1>

  <div v-sortable>
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.