{"id":12475,"library":"vue-flickity","title":"Vue Flickity Component","description":"vue-flickity is a legacy Vue 2 component that provides a wrapper for the Flickity.js carousel library. It enables developers to integrate responsive, touch-friendly carousels into Vue 2 applications by exposing Flickity's configuration options via props and methods through component refs. Maintained at version 1.2.1 and last published seven years ago, this package is considered abandoned and is not compatible with Vue 3 or later versions. Its primary utility is for existing Vue 2 projects requiring Flickity integration, offering a convenient component-based API over direct Flickity instantiation. There is no ongoing development or planned updates.","status":"abandoned","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/drewjbartlett/vue-flickity#readme","tags":["javascript","flickity","responsive","touch","carousel","vue"],"install":[{"cmd":"npm install vue-flickity","lang":"bash","label":"npm"},{"cmd":"yarn add vue-flickity","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-flickity","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core carousel library that vue-flickity wraps.","package":"flickity","optional":false},{"reason":"Peer dependency, specifically requiring Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"The primary component is exported as a default import.","wrong":"const Flickity = require('vue-flickity');","symbol":"Flickity","correct":"import Flickity from 'vue-flickity';"}],"quickstart":{"code":"import Vue from 'vue';\nimport Flickity from 'vue-flickity';\n\n// You would typically import Flickity's CSS in your main entry file\n// import 'flickity/css/flickity.css'; \n\nnew Vue({\n el: '#app',\n components: {\n Flickity\n },\n \n data() {\n return {\n flickityOptions: {\n initialIndex: 1,\n prevNextButtons: true,\n pageDots: true,\n wrapAround: true,\n cellAlign: 'left'\n // any options from Flickity can be used\n }\n }\n },\n \n methods: {\n next() {\n if (this.$refs.flickity) {\n this.$refs.flickity.next();\n }\n },\n \n previous() {\n if (this.$refs.flickity) {\n this.$refs.flickity.previous();\n }\n }\n },\n template: `\n
\n

My Flickity Carousel

\n \n
Cell 1
\n
Cell 2
\n
Cell 3
\n
Cell 4
\n
Cell 5
\n \n\n \n \n \n
\n `\n});","lang":"javascript","description":"This quickstart demonstrates how to integrate `vue-flickity` into a Vue 2 application, configure it with various options, and implement custom navigation using component methods."},"warnings":[{"fix":"For new projects, consider modern, actively maintained carousel libraries for Vue 3+. For existing Vue 2 projects, proceed with caution and thorough testing.","message":"The `vue-flickity` package is abandoned and has not been updated in over seven years. It is not maintained and may contain security vulnerabilities or compatibility issues with newer environments.","severity":"breaking","affected_versions":">=1.2.1"},{"fix":"Ensure your project is running Vue 2.x. If migrating to Vue 3, you must replace `vue-flickity` with a Vue 3-compatible carousel solution.","message":"This package exclusively supports Vue 2.x and is incompatible with Vue 3 or later versions. Attempting to use it in a Vue 3 project will result in runtime errors related to component registration or template compilation.","severity":"breaking","affected_versions":">=1.2.1"},{"fix":"Add `import 'flickity/css/flickity.css';` to your main JavaScript file or link the CSS directly in your HTML.","message":"The `vue-flickity` component does not bundle Flickity.js's CSS. Users must manually import the Flickity CSS (e.g., `import 'flickity/css/flickity.css';`) in their project's entry point or main CSS file for the carousel to render correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"After dynamic content updates, manually call `this.$refs.flickity.flickity.reloadCells()` or `this.$refs.flickity.flickity.resize()` to force Flickity to re-evaluate the layout.","message":"If content inside the carousel cells changes dynamically after the component mounts, Flickity might not re-calculate cell positions correctly. This can lead to misaligned or non-functional carousels.","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":"This component is for Vue 2 only. Downgrade Vue to 2.x or switch to a Vue 3 compatible carousel library.","cause":"Attempting to use `vue-flickity` in a Vue 3 application.","error":"[Vue warn]: Failed to mount component: template or render function not defined. (found in )"},{"fix":"Ensure the `flickity` component has a `ref=\"flickity\"` attribute and that you are calling methods only after the component has been mounted (e.g., in `mounted()` lifecycle hook or within a `v-if` check).","cause":"This typically occurs when `$refs.flickity` is undefined, meaning the component hasn't mounted yet, or the ref name is incorrect, or the component itself failed to initialize.","error":"TypeError: Cannot read properties of undefined (reading 'next')"},{"fix":"Import `flickity/css/flickity.css` in your project's main JavaScript file (e.g., `main.js`) or include it via a `` tag in your HTML.","cause":"Flickity's essential CSS (`flickity.css`) has not been imported or included in the project, preventing the library from styling and activating the carousel.","error":"Carousel cells appear as a static list, not a sliding carousel."}],"ecosystem":"npm"}