VueFlux
Home
  • v5
  • v6
  • v7
Demos
GitHub
Home
  • v5
  • v6
  • v7
Demos
GitHub
  • Overview
  • Changelog
  • Installation and usage
  • SSR with Nuxt
  • Components
    • VueFlux
    • FluxButton
    • FluxCube
    • FluxGrid
    • FluxImage
    • FluxParallax
    • FluxTransition
    • FluxVortex
    • FluxWrapper
  • Complements
    • FluxCaption
    • FluxControls
    • FluxIndex
    • FluxPagination
    • FluxPreloader
  • Transitions
    • Blinds 2D
    • Blinds 3D
    • Blocks 1
    • Blocks 2
    • Book
    • Camera
    • Concentric
    • Cube
    • Explode
    • Fade
    • Fall
    • Kenburn
    • Round 1
    • Round 2
    • Slide
    • Swipe
    • Warp
    • Waterfall
    • Wave
    • Zip
  • Custom transitions

SSR with Nuxt

This version is friendlier to SSR because now, the package comes with an SSR version ready.

component.vue

Wrap the <vue-flux> where you want to use it with <client-only> tags.

<client-only>
   <vue-flux>...</vue-flux>
</client-only>

Import vue-flux components from the SSR version package.

Because the SSR version does not allow to include CSS in the package, you will have to import it also.

You can import the CSS in the component where you will use the slider, or in any preprocessed CSS file like SASS or Stylus

import {
  VueFlux,
  FluxControls,
} from 'vue-flux/dist-ssr/vue-flux.umd.min.js';

import 'vue-flux/dist-ssr/vue-flux.css';

export default {
   ...
   components: {
      VueFlux,
      FluxControls,
   },
   ...
}
Last Updated: 12/8/25, 7:54 AM
Prev
Installation and usage
Next
Components