It's not work in Nuxt production mode

[Bombay]

I'm using nuxt.

It's working in dev mode but not working in production mode.
(flickity option is ssr false)

• in dev mode
  

• in proudction mode
  

[MartinMuzatko]

Can't even get it to run in dev mode :/ @Bombay how do you set ssr false for flickity?

[yaki4]

You need to create a plugin and import it in nuxt.config.js with ssr set to false.
Here is the code for the plugin :
import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('flickity', Flickity)

[Bombay]

I already set flickity with ssr false.
It's working on dev mode but not on production mode.

[Bombay]

@MartinMuzatko

1. I make flickity.js in plugins folder.

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('flickity', Flickity)

2. in nuxt.config.js

module.exports = {
  plugins: [
    {src: '~/plugins/flickity', ssr: false},
  ]
}

[toleberdyyeva]

Hi there , is this issue has been solved ? Cause I'm using flickity on nuxt project. @Bombay how is goin ?

[mcrider]

In my case, It wasn't working in chrome but was working in other browsers. I'm not sure why this component isn't converting the flickity dom element to a div (as it does in dev mode), but I was able to get around the issue by adding flickity { display: block; } to the CSS of my module.

[Bombay]

@toleberdyyeva Sorry for the delay. now I'm using flickity directly in mounted() and watch section.

if (this.flky) this.flky.destroy()
this.flky = null

const carousel = document.querySelector('.score-card-carousel')
const Flickity = require('flickity')
this.flky = new Flickity(carousel, this.flickityOptions)

[michaelpumo]

I'm also getting this issue using Nuxt 2.6.2.

[michaelpumo]

Can't even get it to run in dev mode :/ @Bombay how do you set ssr false for flickity?

Me neither. Is it possible? I'm setting Vue Flickity as a plugin for Nuxt with mode set to client and still not joy!

[yaki4]

@michaelpumo Have you put the no-ssr tag before your div who use vue-flickity ?
If yes, you can try to use flickity instead.
Here how you can use it in a component

<script>
let Flickity = {}
if (process.browser) {
  Flickity = require("flickity")
}
export default{
created () {
    // here i create my options variable
    this.flickityOptionsPromos = {
      resize: true,
      contain: false,
      wrapAround: true,
      setGallerySize: false,
      autoPlay: 4000
    }
  },
  mounted() {
    const carousel = this.$refs.flickycarous
    if (carousel) {
      this.flick = new Flickity(carousel, this.flickityOptionsPromos)
    }
  }
}
</script>
<template lang="pug">
.carousel
    div.flickity-carousel-promo(ref="flickycarous")
      .carousel-cell_serv.promo__card(v-for="(produit, index) in produits", :key="index")
        .promo__wrapper
          img.fallback-image(:src="produit.image")
</template>

[michaelpumo]

@michaelpumo Have you put the no-ssr tag before your div who use vue-flickity ?
If yes, you can try to use flickity instead.
Here how you can use it in a component

<script>
let Flickity = {}
if (process.browser) {
  Flickity = require("flickity")
}
export default{
created () {
    // here i create my options variable
    this.flickityOptionsPromos = {
      resize: true,
      contain: false,
      wrapAround: true,
      setGallerySize: false,
      autoPlay: 4000
    }
  },
  mounted() {
    const carousel = this.$refs.flickycarous
    if (carousel) {
      this.flick = new Flickity(carousel, this.flickityOptionsPromos)
    }
  }
}
</script>
<template lang="pug">
.carousel
    div.flickity-carousel-promo(ref="flickycarous")
      .carousel-cell_serv.promo__card(v-for="(produit, index) in produits", :key="index")
        .promo__wrapper
          img.fallback-image(:src="produit.image")
</template>

Thanks but I have textual content in my slider that I certainly need for SSR purposes.

[yaki4]

@michaelpumo you'll have all the content in ssr with this solution.
Flickity will only execute on client side and put custom style to your div.
If you don't create a style for the server side it'll be ugly but it'll be there.

[special-offer]

I'm also having troubles with vue-flickity in a nuxt app. I find that it's working when I deploy the app to a heroku container, but when I deploy to a netlify container the carousel arrows/dots are not styled and the slides don't transition (even though the active dot does). i'm running npm run generate on netlify.

[Tuginho]

I'm also having troubles with vue-flickity in a nuxt app. I find that it's working when I deploy the app to a heroku container, but when I deploy to a netlify container the carousel arrows/dots are not styled and the slides don't transition (even though the active dot does). i'm running npm run generate on netlify.

Same for me.

[ArashKenji73]

I'm using nuxt.

It's working in dev mode but not working in production mode.
(flickity option is ssr false)

• in dev mode
  
• in proudction mode
  

just put no-ssr tag around it like that:
```

[trandaison]

1. Import vue-flickity as a plugin.
   create a js file under plugin folder: plugins/vue-flickity.js

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('flickity', Flickity)

2. in nuxt.config.js

{
  // other configs
  plugins: [
    { src: '~/plugins/vue-flickity', ssr: false },
  ]
  // other configs
}

3. In component file

<template>
  <client-only>
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
      <div class="carousel-cell">4</div>
      <div class="carousel-cell">5</div>
    </flickity>
  </client-only>
</template>

You can also import Flickity as a component, and register, but don't forget to wrap inside the <client-only> tag.

import Flickity from 'vue-flickity';

export default {
  components: {
    Flickity
  },
  // ...

[kissu]

1. Import vue-flickity as a plugin.
   create a js file under plugin folder: plugins/vue-flickity.js

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('flickity', Flickity)

1. in nuxt.config.js

{
  // other configs
  plugins: [
    { src: '~/plugins/vue-flickity', ssr: false },
  ]
  // other configs
}

1. In component file

<template>
  <client-only>
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
      <div class="carousel-cell">4</div>
      <div class="carousel-cell">5</div>
    </flickity>
  </client-only>
</template>

You can also import Flickity as a component, and register, but don't forget to wrap inside the <client-only> tag.

import Flickity from 'vue-flickity';

export default {
  components: {
    Flickity
  },
  // ...

This solution is sub-optimal since it's importing the component globally to your entire Nuxt project.
Having a local import of the package is still a thing to have (would consider it as mandatory even).

---

Here is my solution for this: https://stackoverflow.com/a/69572014/8816585

[adamalfredsson]

I had an issue loading it when using it with Vue.extend. So I switched from:

export default Vue.extend({
  // ...
});

to:

export default {
  // ...
};

And it works.. Don't ask