VueFlux
Home
  • v5
  • v6
  • v7
Demos
GitHub
Home
  • v5
  • v6
  • v7
Demos
GitHub
  • Overview
  • Changelog
  • Installation and usage
  • Templating
  • SSR with Nuxt
  • Components
    • VueFlux
    • FluxParallax
    • FluxCaption
    • FluxControls
    • FluxIndex
    • FluxPagination
    • FluxImage
    • FluxWrapper
    • FluxCube
    • FluxGrid
    • FluxVortex
    • FluxThumb
  • 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

Edit the Nuxt config to let it know not to SSR and to add it as vendor.

nuxt.config.js

   ...
   plugins: [{
      src: '~/node_modules/vue-flux', ssr: false
   }],
   build: {
      vendor : ['vue-flux'],
   ...

Then wrap the <vue-flux> component with <no-ssr> to indicate Nuxt what not to SSR in template and import vue-flux when its run in the browser.

gallery.vue

<no-ssr>
   <vue-flux>...</vue-flux>
</no-ssr>
let VueFlux;
let Transitions;

if (process.browser) {
   const VF = require('vue-flux');
   VueFlux = VF.VueFlux;
   Transitions = VF.Transitions;
}

export default {
   components: {
      VueFlux
   },

   data: () => ({
      fluxOptions: {
         autoplay: false
      },
      fluxImages: [
         'https://source.unsplash.com/random',
         'https://source.unsplash.com/random',
         'https://source.unsplash.com/random'
      ],
      fluxTransitions: Transitions
   })
}
Last Updated: 10/24/23, 4:45 PM
Prev
Templating
Next
Components