Custom buttons throwing "Flickity is not defined" in Nuxt application using carousel

Question

I am trying to wire my own custom buttons to a flickity carousel in a nuxt application. In my carousel component I have this code

<template>
    <ClientOnly>
        <Flickity
            ref="flickity"
            :key="keyIncrementer"
            class="carousel"
            :class="{ 'carousel--active': active }"
            :options="computedOptions"
        >
            <slot />
        </Flickity>
    </ClientOnly>
</template>

<script>
export default {
  beforeCreate() {
      var flkty = new Flickity(".carousel");
      // previous
      var previousButton = document.querySelector('.button--previous')
      previousButton.addEventListener('click', function () {
          flkty.previous()
      })
      // next
      var nextButton = document.querySelector('.button--next')
      nextButton.addEventListener('click', function () {
          flkty.next()
      })
  },
  beforeDestroy() {
      window.removeEventListener('resize', this.debounceRefresh)
      nextButton.removeEventListener('click', function () {
          flkty.next()
      })
      previousButton.removeEventListener('click', function () {
          flkty.previous()
      })
  },
}
</script>

In my plugins folder I have a vue-flickity.js file

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

Vue.component('Flickity', Flickity)

Without trying to use my own custom buttons the carousel works fine. But with the custom buttons I get an error message ReferenceError Flickity is not defined for this line => var flkty = new Flickity(".carousel"); and Missing stack frames I am obviously doing something wrong here but what ?

At this point, it will be faster to provide us a [repro]. Otherwise, I do recommend you to give a read to my answer here: https://stackoverflow.com/a/68257167/8816585 Here, you error is happening because you're trying to select something that is not even present in the DOM already. A better approach would be to try this in a `mounted()` hook and with `$refs` as explained in my linked answer. — kissu, Oct 15 '21 at 13:17
As it's shown in the documentation basically: https://github.com/drewjbartlett/vue-flickity#installation-and-usage Also, maybe try to use `const`/`let` rather than the good old `var` too. — kissu, Oct 15 '21 at 13:19
I have read everything and I am now taking a different approach inspired by your answer. I am going to ask a new question rather than editing this one. — Maxime, Oct 15 '21 at 18:43

tony19 · Answer 1 · 2021-10-16T07:49:05.327

Your usage of Flickity in new Flickity() assumes that the Flickity constructor (from the flickity package) is globally defined (perhaps by vue-flickity), but that's not the case. Also, flickity and vue-flickity are not intended to be used simultaneously like that.

To bind vue-flickity's next/previous methods as handlers for your own buttons, use @click handlers on the buttons that call this.$refs.flickity.next()/this.$refs.flickity.previous():

<Flickity ref="flickity" class="carousel">...</Flickity>
<button @click="next">Next</button>
<button @click="prev">Prev</button>

export default {
  methods: {
    next() {
      this.$refs.flickity.next()
    },
    prev() {
      this.$refs.flickity.previous()
    },
  },
}

This is actually the same example from the vue-flickity usage docs.

demo

Custom buttons throwing "Flickity is not defined" in Nuxt application using carousel

1 Answers1