Using Flickity API in Vue 3 with Typescript Integration

Question

Using Flickity API in Vue 3 with Typescript Integration

I have encountered an issue with implementing Flickity in my Vue 3 application. Everything works perfectly fine when using a static HTML carousel with fixed cells. However, I am facing difficulties when attempting to dynamically add cells during runtime using the Flickity API.

While following the append() example, I encounter the following error:

flickity.js?1385:72 Bad element for Flickity: .carousel

This error appears in the inspector during runtime. I have tried various solutions from Stack Overflow and GitHub, but none of them seem to be working successfully. It seems like there are TypeScript-related issues with the Flickity library. I have also installed @types/flickity.

What steps should I take to resolve the issue with my append logic as shown below?

<template>
        <div class="row">
          <div class="col d-block m-auto payment-option">
            <flickity ref="carousel" :options="flickityOptions">
            </flickity>
          </div>
      </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
//import Flickity from 'vue-flickity/src/flickity.vue';
import Flickity from 'flickity'
export default defineComponent({
  name: "PageName",
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 3,
        prevNextButtons: false,
        pageDots: true,
        wrapAround: true
      }
    };
  },
  methods: {
    createBankAccountCarousel(flkty: Flickity) {
      flkty.append(this.makeFlickityCell())
    },
    makeFlickityCell() {
      const cell = document.createElement('div');
      cell.className = 'carousel-cell'
      cell.textContent = "Hi"
      return cell
    }
  },
  mounted() {
    let flkty = new Flickity(this.$refs.carousel)
    this.createBankAccountCarousel(flkty)
  }
});
</script>

javascript typescript vue.js vuejs3 flickity

Answer 1

Answer №1

It seems like you were attempting to use vue-flickity with Vue 3, but that component was designed for Vue 2.

You have the option to create your own Flickity component in Vue 3:

Create a file named Flickity.vue with a template and script that includes a template ref on the root element, and a slot to receive .carousel-cell elements:

<template>
  <!-- 👇 template ref -->
  <div ref="root" class="flickity">
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const root = ref<HTMLElement | null>(null) // reference to template ref named "root"
    return {
      root,
    }
  }
})
</script>

Add an options prop that will be passed to the Flickity constructor later:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    options: Object,
  }
})
</script>

Incorporate the mounted hook in the component to initialize the Flickity instance using the "root" template ref and the provided options prop; and in unmounted, make sure to destroy the Flickity instance:

<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from 'vue'
import Flickity from 'flickity'

export default defineComponent({
  setup(props) {
    let flickity: typeof Flickity | null = null
    onMounted(() => flickity = new Flickity(root.value as HTMLElement, props.options))
    onUnmounted(() => flickity?.destroy())
  }
})
</script>

Introduce a method called "append" to enable appending new elements to the carousel:

<script lang="ts">
import { defineComponent } from 'vue'
import Flickity from 'flickity'

export default defineComponent({
  setup() {
    let flickity: typeof Flickity | null = null
    return {
      append(element: HTMLElement) {
        flickity?.append(element)
        flickity?.select(-1)
      }
    }
  }
})
</script>

Create a file named src/flickity.d.ts containing specific type declarations for better indexing (if you are using VS Code, consider restarting the IDE for proper recognition):

declare module 'flickity' {
  const Flickity: {
    new (el: string | HTMLElement, options?: Record<string, unknown>): this
    append(element: HTMLElement)
    destroy()
    select(id: string | number)
  }
  export = Flickity
}

Include the following <style> block to incorporate default styles from flickity and style the .carousel-cell elements received in the slot:

<style scoped>
@import '~flickity/dist/flickity.css';

.flickity .carousel {
  background: #EEE;
  margin-bottom: 40px;
}
/* use ::v-deep to access slot elements */
.flickity::v-deep .carousel-cell {
  height: 200px;
  width: 25%;
  margin: 0 10px;
  background: #6C6;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
</style>

Example Usage:

<template>
  <div class="app">
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
    </flickity>
    <div class="actions">
      <button @click="addElement">Append element</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Flickity from './components/Flickity.vue'

export default defineComponent({
  name: 'App',
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        pageDots: true,
        wrapAround: true,
      }
    }
  },
  methods: {
    addElement() {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (this.$refs.flickity as any).append(this.makeFlickityCell())
    },
    makeFlickityCell() {
      const cell = document.createElement('div')
      cell.className = 'carousel-cell'
      cell.textContent = 'Hi'
      return cell
    }
  }
})
</script>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 50vh;
}
</style>

demo

Answer 2

It seems like you were attempting to use vue-flickity with Vue 3, but that component was designed for Vue 2.

You have the option to create your own Flickity component in Vue 3:

Create a file named Flickity.vue with a template and script that includes a template ref on the root element, and a slot to receive .carousel-cell elements:

<template>
  <!-- 👇 template ref -->
  <div ref="root" class="flickity">
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const root = ref<HTMLElement | null>(null) // reference to template ref named "root"
    return {
      root,
    }
  }
})
</script>

Add an options prop that will be passed to the Flickity constructor later:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    options: Object,
  }
})
</script>

Incorporate the mounted hook in the component to initialize the Flickity instance using the "root" template ref and the provided options prop; and in unmounted, make sure to destroy the Flickity instance:

<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from 'vue'
import Flickity from 'flickity'

export default defineComponent({
  setup(props) {
    let flickity: typeof Flickity | null = null
    onMounted(() => flickity = new Flickity(root.value as HTMLElement, props.options))
    onUnmounted(() => flickity?.destroy())
  }
})
</script>

Introduce a method called "append" to enable appending new elements to the carousel:

<script lang="ts">
import { defineComponent } from 'vue'
import Flickity from 'flickity'

export default defineComponent({
  setup() {
    let flickity: typeof Flickity | null = null
    return {
      append(element: HTMLElement) {
        flickity?.append(element)
        flickity?.select(-1)
      }
    }
  }
})
</script>

Create a file named src/flickity.d.ts containing specific type declarations for better indexing (if you are using VS Code, consider restarting the IDE for proper recognition):

declare module 'flickity' {
  const Flickity: {
    new (el: string | HTMLElement, options?: Record<string, unknown>): this
    append(element: HTMLElement)
    destroy()
    select(id: string | number)
  }
  export = Flickity
}

Include the following <style> block to incorporate default styles from flickity and style the .carousel-cell elements received in the slot:

<style scoped>
@import '~flickity/dist/flickity.css';

.flickity .carousel {
  background: #EEE;
  margin-bottom: 40px;
}
/* use ::v-deep to access slot elements */
.flickity::v-deep .carousel-cell {
  height: 200px;
  width: 25%;
  margin: 0 10px;
  background: #6C6;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
</style>

Example Usage:

<template>
  <div class="app">
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
    </flickity>
    <div class="actions">
      <button @click="addElement">Append element</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Flickity from './components/Flickity.vue'

export default defineComponent({
  name: 'App',
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        pageDots: true,
        wrapAround: true,
      }
    }
  },
  methods: {
    addElement() {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (this.$refs.flickity as any).append(this.makeFlickityCell())
    },
    makeFlickityCell() {
      const cell = document.createElement('div')
      cell.className = 'carousel-cell'
      cell.textContent = 'Hi'
      return cell
    }
  }
})
</script>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 50vh;
}
</style>

demo

Using Flickity API in Vue 3 with Typescript Integration

Answer №1

Example Usage:

Similar questions

Modifying CSS styles in JavaScript based on the user's browser restrictions

Unable to stop submission as a result of ajax verification

Display components created for children above the components created for parents

Blend the power of Dynamic classes with data binders in Vue.js

Error: The specified JSON path for Ajax request could not be

IIS Alert: Missing Images, CSS, and Scripts!

Move and place multimedia items using IE's drag and drop feature

Concealing two div elements based on string content

Angular - the ngFor directive causing function to be executed repeatedly

The initial values of Typescript class members are merged directly into the class constructor

The authentication method "discord" is not recognized

Good day extract a collection of articles

A guide to setting defaultValue dynamically in React Hook Form

TinyMCE file multimedia upload feature allows users to easily add audio, video

Displaying variables in JavaScript HTML

How can I use an input array to filter data in mongodb?

Is there a way to automatically close one menu when another is opened by clicking?

Unexpected state being returned by Vuex

Interactive image sliders in a Netflix-inspired style with live previews on hover, fully compatible with Bootstrap framework

Guide on how to fetch Laravel's CSRF token with a separate Vue frontend