I’m using the latest version of vue.js Carousel in my Nuxt JS application. It seems that I get errors on each of my blog posts whenever using the universal mode for Nuxt JS. If I take out vue.js Carousel and do a standard v-for loop, the blogs show perfectly fine, there’s something causing the error when using the carousel.
My code:
<carousel :paginationEnabled=”false” :navigationEnabled=”true” :perPageCustom=”[[250, 1], [1024, 2]]“>
<slide v-for=”blog in blogs.blogs” :key=”blog.id” v-if=”currentBlogDate >= blog.created && blog.created”>
<b-card class=”text-center m-3 p-0 p-md-3”>
<h4 class=”display-4 font-weight-normal mb-3”>{ blog.title | striphtml | truncate(32, ‘…’) }</h4>
<b-card-text class=”text-muted”>{ blog.body | striphtml | truncate(32, ‘…’) }</b-card-text>
<b-button :to=”‘/posts/view/‘ + blog.title” size=”sm” variant=”primary”>Read More<i class=”fas fa-angle-right pl-2”></i></b-button>
</b-card>
</slide>
</carousel>
The error:
TypeError: Cannot read property ‘indexOf’ of undefined
Solution :
Seems like the component is not optimized for server-side rendering.
Keep in mind that Nuxt.js universal has neither window nor document objects during server-side rendering.
Quick fix for you - is to wrap the SSR incompatible components with <no-ssr></no-ssr> component.
https://nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component