Vue

Swapy is a client-side library, meaning you need to make sure the DOM is loaded and the component is mounted before creating a new Swapy instance.

In Vue, you can use onMounted for that. And don’t forget to destroy the Swapy instance on component destroy, using onUnmounted.

Vue Example

<script setup>
import { createSwapy } from 'swapy'
import { onMounted, onUnmounted, ref } from 'vue';

const swapy = ref(null)
const container = ref()

onMounted(() => {
  // If container element is loaded
  if (container.value) {
    swapy.value = createSwapy(container.value)

    // Your event listeners
    swapy.value.onSwap(event => {
      console.log('swap', event)
    })
  }
})

onUnmounted(() => {
  // Destroy the swapy instance on component destroy
  swapy.value?.destroy()
})
</script>

<template>
  <div ref="container">

    <div data-swapy-slot="a">
      <div data-swapy-item="a">
        <div>A</div>
      </div>
    </div>

    <div data-swapy-slot="b">
      <div data-swapy-item="b">
        <div>B</div>
      </div>
    </div>

  </div>
</template>