Vue/Nuxt slick with Typescript

Support

Package support ESM, UMD, CJS
Package can install via NPM/YARN or just add script CDN

Package support only Vue >=3.2 version
For legacy support see here

Installation

Installation by CDN

Just add script to your project to footer in your body tag

1<script src="https://unpkg.com/vue-slick-ts@latest"></script>

Installation by Npm/Yarn

Prerequisite

1npm install -D @types/jquery
2# or
3yarn add -D @types/jquery

1npm install vue-slick-ts
2# or
3yarn add vue-slick-ts

Example Usage

1<script setup lang="ts">
2  import { ref, onMounted } from "vue";
3  import { ListSlickMethods, VueSlickCarousel } from "vue-slick-ts";
4  import type { SlickInstance } from "vue-slick-ts";
5  import "vue-slick-ts/dist/css/slick.css";
6
7  const carousel = ref<SlickInstance | null>(null);
8
9  const handleInit = (e: JQuery.Event, instance: SlickInstance) => {
10    console.log(e, instance);
11  };
12
13  onMounted(() => {
14    carousel.value!(ListSlickMethods.SLICK_METHODS_PLAY);
15  });
16</script>
17
18<template>
19  <VueSlickCarousel ref="carousel" @init="handleInit" :autoplay-speed="4000">
20    <div>Test 1</div>
21    <div>Test 2</div>
22  </VueSlickCarousel>
23</template>