[Vuejs]-'window is not defined' error in Nuxt.js when importing a non-vue package such as Flickity – despite using client mode and checking process.client

With a nuxt plugin, you will import Flickity on every page.

An alternative is to make a dynamic import of your Flickity with an await import, and only for the current nuxt page on mounted event, as follows:

async mounted() {
   await this.initiateCarousel();
},
methods: {
  async initiateCarousel() {
    if (process.client) {
        const gallery = this.$refs.gallery;
        const carousel = this.$refs.carousel;
        console.log(carousel);

        const { default: Flickity } = await import(/* webpackChunkName: "flickity" */ 'Flickity');

        var flkty = new Flickity( carousel , {
            cellAlign: 'left',
            lazyLoad: 3,
            contain: true,
            pageDots: false,
            prevNextButtons: false
        });
    }
  }
}