{"id":12579,"library":"vue-slick","title":"Vue 2 Wrapper for Slick Carousel","description":"vue-slick is a component library that provides a Vue 2 wrapper for the popular jQuery-based Slick Carousel. It allows developers to integrate the feature-rich Slick carousel into their Vue 2 applications with a component-based API. The package is currently at version 1.2.0 and has been explicitly declared as no longer actively maintained by its primary contributor, indicating an abandoned status. It differentiates itself by offering a Vue-native syntax for controlling Slick, including prop-based options, method calls via refs, and event listeners. However, its core reliance on `slick-carousel` and `jQuery` introduces complexities, particularly concerning dependency management and potential version conflicts, which are highlighted in its documentation. Its support is strictly limited to Vue 2 environments.","status":"abandoned","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/staskjs/vue-slick","tags":["javascript","slick","carousel","vue","typescript"],"install":[{"cmd":"npm install vue-slick","lang":"bash","label":"npm"},{"cmd":"yarn add vue-slick","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-slick","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core carousel functionality that vue-slick wraps. Users must install this package.","package":"slick-carousel","optional":false},{"reason":"A peer dependency of vue-slick, and a direct dependency of slick-carousel. Essential for the underlying carousel logic.","package":"jquery","optional":false},{"reason":"This is a Vue 2 component library and requires Vue 2 as a runtime dependency.","package":"vue","optional":false}],"imports":[{"note":"The primary component for integrating Slick Carousel. Designed for Vue 2 applications.","wrong":"const Slick = require('vue-slick');","symbol":"Slick","correct":"import Slick from 'vue-slick';"},{"note":"Requires importing the official slick-carousel styles directly, not from the vue-slick package itself.","wrong":"import 'vue-slick/dist/slick.css';","symbol":"Slick CSS","correct":"import 'slick-carousel/slick/slick.css';"}],"quickstart":{"code":"import Vue from 'vue';\nimport Slick from 'vue-slick';\nimport 'slick-carousel/slick/slick.css';\n\nnew Vue({\n    el: '#app',\n    components: { Slick },\n\n    data() {\n        return {\n            slickOptions: {\n                slidesToShow: 3,\n                dots: true,\n                infinite: true,\n                speed: 500,\n                // Any other options that can be got from plugin documentation\n            },\n            slides: [\n                'http://placehold.it/2000x1000?text=Slide%201',\n                'http://placehold.it/2000x1000?text=Slide%202',\n                'http://placehold.it/2000x1000?text=Slide%203',\n                'http://placehold.it/2000x1000?text=Slide%204',\n                'http://placehold.it/2000x1000?text=Slide%205'\n            ]\n        };\n    },\n\n    methods: {\n        next() {\n            this.$refs.slick.next();\n        },\n\n        prev() {\n            this.$refs.slick.prev();\n        },\n\n        reInit() {\n            // Helpful if you have to deal with v-for to update dynamic lists\n            this.$nextTick(() => {\n                this.$refs.slick.reSlick();\n            });\n        },\n\n        handleAfterChange(event, slick, currentSlide) {\n            console.log('After change:', currentSlide);\n        }\n    },\n\n    template: `\n        <div>\n            <button @click=\"prev\">Previous</button>\n            <button @click=\"next\">Next</button>\n            <button @click=\"reInit\">Re-init</button>\n            <slick ref=\"slick\" :options=\"slickOptions\" @afterChange=\"handleAfterChange\">\n                <a v-for=\"(src, index) in slides\" :key=\"index\" :href=\"src\">\n                    <img :src=\"src\" alt=\"Slide Image\" />\n                </a>\n            </slick>\n        </div>\n    `\n});","lang":"javascript","description":"This quickstart demonstrates how to import, register, and use the `Slick` component in a Vue 2 application. It shows how to pass options via props, control the carousel programmatically using methods accessed via refs, and listen to events."},"warnings":[{"fix":"Migrate to a different, actively maintained Vue carousel library, ideally one without jQuery dependencies, or be prepared to fork and maintain vue-slick yourself.","message":"The vue-slick package is explicitly no longer supported by its main contributor. This means no new features, bug fixes, or compatibility updates for future Vue or slick-carousel versions are expected. Users should consider migrating to actively maintained alternatives.","severity":"breaking","affected_versions":">=1.2.0"},{"fix":"Ensure your project uses Vue 2.x. If migrating to Vue 3, you must use a different carousel library designed for Vue 3.","message":"vue-slick is only compatible with Vue >= 2. It does not support Vue 3 or later versions due to breaking changes in Vue's API and component lifecycle.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure jQuery is correctly installed and exposed globally or via webpack aliases. If using webpack, consider aliases to prevent multiple jQuery instances. For example, `resolve: { alias: { 'jquery': 'jquery/src/jquery' } }`.","message":"The underlying `slick-carousel` library, and by extension `vue-slick`, depends on jQuery. This can lead to issues with bundle size, potential conflicts if multiple jQuery versions are loaded, or difficulty integrating into projects that aim to avoid jQuery entirely.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install jQuery (`npm install jquery`) and ensure it's imported or globally exposed before slick-carousel and vue-slick are initialized. For webpack, you might need to use `new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })`.","cause":"The underlying slick-carousel library requires jQuery to be available globally, but it has not been loaded or correctly exposed in the application environment.","error":"jQuery is not defined"},{"fix":"Verify that the `Slick` component has `ref=\"slick\"` and that `slick-carousel` and `jquery` are correctly loaded and initialized. Ensure you are calling methods within `this.$nextTick` if dealing with dynamic content changes that might cause re-initialization.","cause":"The Slick carousel instance or its methods are not available on the component's ref, often due to the carousel not being fully initialized or an incorrect ref name.","error":"TypeError: this.$refs.slick.next is not a function"}],"ecosystem":"npm"}