first

src/composables/tiny-slider.ts

@@ -0,0 +1,30 @@
+import type { TinySliderInstance, TinySliderSettings } from 'tiny-slider/src/tiny-slider'
+import type { MaybeRefOrGetter } from 'vue'
+
+export function useTinySlider(
+  target: Ref<Element | undefined>,
+  settings: MaybeRefOrGetter<Omit<TinySliderSettings, 'container'>> = {},
+) {
+  const slider = shallowRef<TinySliderInstance | null>(null)
+
+  onMounted(async () => {
+    if (target.value) {
+      const { tns } = await import('tiny-slider/src/tiny-slider')
+
+      slider.value = tns({
+        container: target.value,
+        ...toValue(settings),
+      })
+    }
+  })
+
+  onUnmounted(() => {
+    if (slider.value) {
+      slider.value.destroy()
+    }
+  })
+
+  return {
+    slider,
+  }
+}