Getting Started

Install

npm i @mihnsen/vue-slick

vue (^3.4) is a peer dependency; @vueuse/core comes along as the only runtime dependency.

CSS

import '@mihnsen/vue-slick/slick.css'        // required: layout
import '@mihnsen/vue-slick/slick-theme.css'  // optional: default arrows & dots

Usage

Slot + individual props

<script setup>
import { SlickCarousel } from '@mihnsen/vue-slick'
</script>

<template>
  <SlickCarousel :dots="true" :infinite="true" :slides-to-show="3">
    <div v-for="i in 6" :key="i">Slide {{ i }}</div>
  </SlickCarousel>
</template>

settings object

<script setup>
import { SlickCarousel } from '@mihnsen/vue-slick'

const settings = {
  dots: true,
  slidesToShow: 3,
  responsive: [{ breakpoint: 768, settings: { slidesToShow: 1 } }],
}
</script>

<template>
  <SlickCarousel :settings="settings">
    <div v-for="i in 6" :key="i">Slide {{ i }}</div>
  </SlickCarousel>
</template>

Precedence: defaults → settings object → individual props → the matched responsive breakpoint. See the API reference for every setting.

SSR / Nuxt 3

SlickCarousel renders its full markup on the server (percent-based layout, no measurement) and hydrates without mismatch. No <ClientOnly> wrapper needed.