{"id":26613,"library":"vue-flux","title":"vue-flux","description":"Vue 3 image slider with 20 built-in transitions, parallax support, gestures, and full TypeScript types. Current stable version: 7.1.2, requires Vue ^3.5.0. Release cadence: active development with multiple major versions over past years. Key differentiators: lightweight (~60KB), CSS3 hardware-accelerated animations, customizable transitions, responsive, mobile-friendly with gestures, and includes components for captions, controls, pagination, preloaders, and index display. Suitable for image sliders, carousels, and galleries.","status":"active","version":"7.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/ragnarlotus/vue-flux","tags":["javascript","vue","image","slider","carousel","parallax","typescript"],"install":[{"cmd":"npm install vue-flux","lang":"bash","label":"npm"},{"cmd":"yarn add vue-flux","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-flux","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for Vue 3 integration","package":"vue","optional":false}],"imports":[{"note":"VueFlux is a named export, not default.","wrong":"import VueFlux from 'vue-flux'","symbol":"VueFlux","correct":"import { VueFlux } from 'vue-flux'"},{"note":"Img is a named export for creating image resources.","wrong":"import Img from 'vue-flux'","symbol":"Img","correct":"import { Img } from 'vue-flux'"},{"note":"Transitions are named exports and are used directly as transition values.","wrong":"import { Book as BookTransition } from 'vue-flux'","symbol":"Book","correct":"import { Book, Zip } from 'vue-flux'"},{"note":"All components are available via the main package entry.","wrong":"import { FluxControls } from 'vue-flux/dist/vue-flux.js'","symbol":"FluxControls","correct":"import { FluxControls } from 'vue-flux'"},{"note":"Import the CSS from the correct path.","wrong":"import 'vue-flux/dist/style.css'","symbol":"style.css","correct":"import 'vue-flux/style.css'"}],"quickstart":{"code":"import { ref, shallowReactive } from 'vue';\nimport {\n  VueFlux,\n  FluxPreloader,\n  FluxCaption,\n  FluxControls,\n  FluxPagination,\n  FluxIndex,\n  Img,\n  Book,\n  Zip\n} from 'vue-flux';\nimport 'vue-flux/style.css';\n\nconst $vueFlux = ref();\n\nconst vfOptions = shallowReactive({\n  autoplay: true,\n});\n\nconst vfRscs = shallowReactive([\n  new Img('https://picsum.photos/id/1/800/400', 'Image 1'),\n  new Img('https://picsum.photos/id/2/800/400', 'Image 2'),\n]);\n\nconst vfTransitions = shallowReactive([Book, Zip]);\n\nexport default {\n  components: { VueFlux, FluxPreloader, FluxCaption, FluxControls, FluxPagination, FluxIndex },\n  setup() {\n    return { $vueFlux, vfOptions, vfRscs, vfTransitions };\n  },\n};","lang":"typescript","description":"Sets up a basic VueFlux slider with two images, two transitions, and optional control components. Demonstrates named imports, CSS import, and component usage."},"warnings":[{"fix":"Upgrade your project to Vue 3.5+.","message":"Vue 2 is not supported. vue-flux v7 requires Vue ^3.5.0.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Add import 'vue-flux/style.css' in your main entry file or component.","message":"Make sure to import the CSS file 'vue-flux/style.css' for styling to work.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Use import { ... } from 'vue-flux' syntax.","message":"All exports (components, transitions, Img) are named exports. Do not use default import.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Use 'new Img(...)' not 'Img' directly.","message":"Resource objects like Img must be instantiated with 'new Img(url, title)'.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Update to v7 and follow current documentation.","message":"Older versions (v5, v6) have different APIs. Refer to version-specific docs.","severity":"deprecated","affected_versions":"<7.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install vue-flux@latest' and ensure import path is 'vue-flux'.","cause":"Missing installation or incorrect import path when using bundler.","error":"Module not found: Can't resolve 'vue-flux'"},{"fix":"Register the component: either use components option or Vue.component('VueFlux', VueFlux) if using global registration.","cause":"VueFlux not registered locally or globally.","error":"Failed to resolve component: VueFlux"},{"fix":"Use 'import { Img } from 'vue-flux'' instead of default import.","cause":"Importing Img incorrectly, possibly as default import.","error":"TypeError: vue_flux__WEBPACK_IMPORTED_MODULE_0__.Img is not a constructor"},{"fix":"Use 'import 'vue-flux/style.css'' (not 'vue-flux/dist/style.css').","cause":"Importing CSS from incorrect path.","error":"CssSyntaxError: unknown word (1:1)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}