Uncaught TypeError: Cannot read property 'prevArrow' of undefined.

[x-N0]

Issue(Bug):

Console Error:

Uncaught TypeError: Cannot read property 'prevArrow' of undefined      vue-slick-carousel.js:10742 
    at Proxy.render (vue-slick-carousel.js:10742)
    at renderComponentRoot (vue.js:1636)
    at componentEffect (vue.js:5387)
    at reactiveEffect (vue.js:331)
    at effect (vue.js:306)
    at setupRenderEffect (vue.js:5370)
    at mountComponent (vue.js:5328)
    at processComponent (vue.js:5284)
    at patch (vue.js:4889)
    at mountChildren (vue.js:5097)

Blank page (is not rendering the content because the error)

Specs:

Using Yarn dev, running Vite. Dependencies:

vue: ^3.0.0-rc.1,
vue-slick-carousel: ^1.0.6",
vite: ^1.0.0-rc.1,

Component:

<template>
  <div>
    <VueSlickCarousel :arrows="true" :dots="true">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <template #prevArrow>
      <div class="prevArrow">Prev</div>
   </template>
   <template #nextArrow>
      <div class="nextArrow">Next</div>
   </template>
    </VueSlickCarousel>
  </div>
</template>

<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {
    name: 'Carousel',
    components: { VueSlickCarousel },
  }
</script>

[haritha2112]

Try updating your slots to be <template #prevArrow="arrowOption"> and <template #nextArrow="arrowOption">

You can find that in this example here under Customizing Arrows & Dots: https://gs-shop.github.io/vue-slick-carousel/#/api

[x-N0]

Nothing changed.

[robert197]

Im having same issue on vue 3 with composition API. Anyone knows how to fix it?

[x-N0]

Hey, @robert197 check try something related with the following:

I fix'd it registering a plugin so I just need to use a component and pass the props to it with an object.

https://medium.com/better-programming/designing-vue3-plugins-using-provide-and-inject-47b586d9ce4

// Im using nuxt tho, but might be pretty related, you can look how plugins work in nuxt too, I'vent played with Vue3.

Give a look at the setup of that is an example project of this project for nuxt: https://github.com/kyuwoo-choi/nuxt-vue-slick-carousel-example

Maybe is not the final answer, but I'm sure are pretty close hints to your target.

Keep coding, doing well and stay safe.

[hammadtariq98]

is there any solution I am getting the same error. I am using Vue 3

[dimer191996]

solution please I'm getting the same error

[craig8two]

I am getting the same error with a super basic example, anyone get this sorted?

[craig8two]

I switched to another component, thanks.

[cody-malcolm]

If anyone finds this looking for the solution, you're probably doing everything correctly, but currently the carousel is not compatible with Vue3.

[pratimans]

@craig8two What component did you switch to? I've tried "vue-slick" and no luck with that either for Vue 3

[x-N0]

Take a look at this snippet I wrote some months ago, might work for you:

Css framework: Tailwindcss. Frontend framework: Vue 2.

<VueSlickCarousel
  class="h-full w-full flex flex-col self-center justify-center"
  v-bind="slickOptions"
<div
    v-for="(x, i) in pMedia"
    :key="i"
    class="img-wrapper content-center"

    <img
      :ondragstart="`return false`"
      :src="require(`@/assets/images/${x}`)"
      alt
      class="object-contain select-none w-full h-full block"
    />
  </div>
</VueSlickCarousel>

private slickOptions: Object = {
  slidesToShow: 1,
  arrows: false,
  // slidesToScroll: 1,
}

Hope it helps, fellas.

I think following this example y'all can get it work, also I think you might encounter some problems while displaying the content, but that's some css stuff to fix, if any issues feel free to reply I will take a look at this code I wrote.

[siazon]

Same error in vue 3

[naresh515]

same error in vue 3 can anyone have any solution for this

[x-N0]

Guys, I'm closing this one since I fixed the issue long time ago.

I see that most of the requests are for Vue3, and as @cody-malcolm pointed out it seems like there's no Vue3 support.

[x-N0]

For Vue3 issues: See #238