vue-flux

7.1.2 verified Fri May 01 auth: no javascript

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.

Common errors

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

cause Missing installation or incorrect import path when using bundler.

fix

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

error Failed to resolve component: VueFlux ↓

cause VueFlux not registered locally or globally.

fix

error TypeError: vue_flux__WEBPACK_IMPORTED_MODULE_0__.Img is not a constructor ↓

cause Importing Img incorrectly, possibly as default import.

fix

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

error CssSyntaxError: unknown word (1:1) ↓

cause Importing CSS from incorrect path.

fix

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

Warnings

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

fix Upgrade your project to Vue 3.5+.

gotcha Make 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.

gotcha All exports (components, transitions, Img) are named exports. Do not use default import. ↓

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

gotcha Resource objects like Img must be instantiated with 'new Img(url, title)'. ↓

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

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

fix Update to v7 and follow current documentation.

Install

npm install vue-flux

yarn add vue-flux

pnpm add vue-flux

Imports

VueFlux

wrong

import VueFlux from 'vue-flux'

correct

import { VueFlux } from 'vue-flux'

VueFlux is a named export, not default.

Img
wrong
```
import Img from 'vue-flux'
```
correct
```
import { Img } from 'vue-flux'
```
Img is a named export for creating image resources.

Book

wrong

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

correct

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

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

FluxControls

wrong

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

correct

import { FluxControls } from 'vue-flux'

All components are available via the main package entry.

style.css

wrong

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

correct

import 'vue-flux/style.css'

Import the CSS from the correct path.

Quickstart

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 };
  },
};