vue-flux

library7.1.2jsnpmunverified

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.

web-framework

npm install vue-flux

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-FLUX

vue-flux

web-frameworkjavascriptv7.1.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueFlux

✓ import { VueFlux } from 'vue-flux'

✗ import VueFlux from 'vue-flux'

VueFlux is a named export, not default.

Img

✓ import { Img } from 'vue-flux'

✗ import Img from 'vue-flux'

Img is a named export for creating image resources.

Book

✓ import { Book, Zip } from 'vue-flux'

✗ import { Book as BookTransition } from 'vue-flux'

Transitions are named exports and are used directly as transition values.

FluxControls

✓ import { FluxControls } from 'vue-flux'

✗ import { FluxControls } from 'vue-flux/dist/vue-flux.js'

All components are available via the main package entry.

style.css

✓ import 'vue-flux/style.css'

✗ import 'vue-flux/dist/style.css'

Import the CSS from the correct path.

Sets up a basic VueFlux slider with two images, two transitions, and optional control components. Demonstrates named imports, CSS import, and component usage.

import { ref, shallowReactive } from 'vue'; import { VueFlux, FluxPreloader, FluxCaption, FluxControls, FluxPagination, FluxIndex, Img, Book, Zip } from 'vue-flux'; import 'vue-flux/style.css'; const $vueFlux = ref(); const vfOptions = shallowReactive({ autoplay: true, }); const vfRscs = shallowReactive([ new Img('https://picsum.photos/id/1/800/400', 'Image 1'), new Img('https://picsum.photos/id/2/800/400', 'Image 2'), ]); const vfTransitions = shallowReactive([Book, Zip]); export default { components: { VueFlux, FluxPreloader, FluxCaption, FluxControls, FluxPagination, FluxIndex }, setup() { return { $vueFlux, vfOptions, vfRscs, vfTransitions }; }, };

Debug

Known issues

breakingVue 2 is not supported. vue-flux v7 requires Vue ^3.5.0.

fix

Upgrade your project to Vue 3.5+.

affects: >=7.0.0

gotchaMake sure to import the CSS file 'vue-flux/style.css' for styling to work.

fix

Add import 'vue-flux/style.css' in your main entry file or component.

affects: >=7.0.0

gotchaAll exports (components, transitions, Img) are named exports. Do not use default import.

fix

Use import { ... } from 'vue-flux' syntax.

affects: >=7.0.0

gotchaResource objects like Img must be instantiated with 'new Img(url, title)'.

fix

Use 'new Img(...)' not 'Img' directly.

affects: >=7.0.0

deprecatedOlder versions (v5, v6) have different APIs. Refer to version-specific docs.

fix

Update to v7 and follow current documentation.

affects: <7.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'vue-flux'

Missing installation or incorrect import path when using bundler.

fix

Run 'npm install vue-flux@latest' and ensure import path is 'vue-flux'.

Failed to resolve component: VueFlux

VueFlux not registered locally or globally.

fix

Register the component: either use components option or Vue.component('VueFlux', VueFlux) if using global registration.

TypeError: vue_flux__WEBPACK_IMPORTED_MODULE_0__.Img is not a constructor

Importing Img incorrectly, possibly as default import.

fix

Use 'import { Img } from 'vue-flux'' instead of default import.

CssSyntaxError: unknown word (1:1)

Importing CSS from incorrect path.

fix

Use 'import 'vue-flux/style.css'' (not 'vue-flux/dist/style.css').

Upgrade

Version history

7.1.2latest on npm

Audit

Dependencies

vuerequiredpeer dependency required for Vue 3 integration

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ragnarlotus/vue-flux ↗

packagehttps://www.npmjs.com/package/vue-flux ↗

homepagehttps://vue-flux.dev ↗