Flickity inside vue transitions

[b8ne]

I have a blog style setup, with a flickity slider for each article.
I then have a side bar with a list of articles, and on click i transition the articles.
During this transition the flickity object seems to lose its styling, and all images breifly stack relative.
Any idea how to prevent this?

[ghost]

Hard to say on this without debugging the UI, but it might be the .destroy() method removing flickity and its core styling while the component is unmounted and animated away. You could try modifying the wrapper so flickity is not destroyed before the transition finishes or you could hardcode some of the necessary styles in your codebase so they remain after flickity is unmounted or you could use <keep-alive> above the component so the beforeDestroy() hook is never triggered.

[chasegiunta]

@b8ne I know it's been a while, but were you ever able to find a workaround for this? Also running into this issue.

[elHornair]

I had the same problem and was able to avoid it by using keep-alive as suggested by @mystrdat. Check the docs for details. Note that keep-alive needs to be around your component but inside the transition.
/cc @chasegiunta @b8ne

[EnMod]

I found that this problem persists in my Nuxt project, and the only way to solve it was to comment out the entire beforeDestroy() hook in the package's src/flickity.vue component. Not sure if that will cause other issues down the road but it's working as of right now.

[1deadpixl]

I found that this problem persists in my Nuxt project, and the only way to solve it was to comment out the entire beforeDestroy() hook in the package's src/flickity.vue component.

Had the same problem using Nuxt and this is a good fix, except…

Not sure if that will cause other issues down the road but it's working as of right now.

…you still need to destroy the Flickity instance(s) after being done with them.

My case was that I wanted to scroll to the top of the page during the leave transition and all my Flickitys were gone before the scroll even started, leaving the page looking gnarly. After disabling the beforeDestroy hook in vue-flickity, I load up the data object of my GSAP tween with all my Flickity references and destroy() them after the leaving animation completes.

All this is necessary because the leave, beforeDestroy and destroy hooks run immediately on a route change and all references get destroyed before the animation finishes so we have to keep them around somewhere.

Update
To disable the hook persistently without worrying about changes from package updates or npm clean installs, the beforeDestroy method can be set to undefined when defining the plugin.

/* plugins/flickity.js */

import Vue from "vue";
import Flickity from "vue-flickity";
import "flickity-imagesloaded";
import "flickity-fade";

Flickity.beforeDestroy = undefined;
Vue.component("flickity", Flickity);

[chrisjansky]

Has anyone managed to solve it when importing vue-flickity only inside a Nuxt single page, like this:

export default {
  components: {
    Flickity: () => import("vue-flickity")
  }
}

Thanks for any pointers.