vue-carousel Cannot read property 'forEach' of undefined

Question

I am install vue-carousel using yarn and add template code copied form documentation. then there is an error saying Cannot read property 'forEach' of undefined.

Frontend screenshot console screenshot

Node/npm version: 6.10.3
OS: macOS 10.14.6 (18G87)

vue component

<carousel>
    <slide>
        Slide 1 Content
    </slide>
    <slide>
         Slide 2 Content
    </slide>
</carousel>

plugins/main.js

import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);
Vue.use(Carousel3d);

nuxt.config.js

/*
  ** Plugins to load before mounting the App
  */
  plugins: [
    {src:'~/plugins/main.js',ssr:false}
  ],

Per the documentation of vue-carousel-3d, you should be using <carousel-3d> as your tag not <carousel>. Also did you register both the carousel and slide as components? — Jbluehdorn
I would agree with @Jbluehdorn - your tag does not look like it refers to anything — JTInfinite
I have used both vue-carousel-3d and vue-carousel.vue-carousel-3d components work fine and errors came from vue-carousel. vue-carousel documentation — Chinthaka Dilan

jamesctucker jamesctucker · Accepted Answer · 2019-09-03T19:36:58

Have you tried importing Vue Carousel locally into your component?

import { Carousel, Slide } from 'vue-carousel';
export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

vue-carousel Cannot read property 'forEach' of undefined

1 Answers