Open andysay opened 2 years ago
I guess the carousel is by default SSR friendly since Window
is used only inside onMounted
hook check, could you give me a working example on the issue you are facing?
Hello,
Having the same issue with nuxt 3 - everything is working alright, however, setting breakpoints throws errors (probably because you cannot access the window in SSR mode.)
Hello, sorry but I'm very new on this, is any chance to have an example or documentation of this plugin installed on Nuxt 3 project?
@ernestoreddi You can refer to the examples section in docs, it should work fine. Pleas let me know if you still have any other questions
Hello ! This is project will be add ssr mode? now we have window is not defined
Nuxt provides the
Use a slot as fallback until
<template #fallback>
<!-- this will be rendered on server side -->
<p>Loading Carousel...</p>
</template>
If anyone is facing same issue, my temporary solution is here: https://github.com/ismail9k/vue3-carousel/issues/194#issuecomment-1402219199
For Nuxt users, here is my fix:
<ClientOnly> ... </ClientOnly>
@t-bee do you mind sharing an example on the plugin and how to use it on the component?
@t-bee do you mind sharing an example on the plugin and how to use it on the component?
Plugins --> vue3-carousel.client.js
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("Carousel", Carousel);
nuxtApp.vueApp.component("Slide", Slide);
nuxtApp.vueApp.component("Pagination", Pagination);
nuxtApp.vueApp.component("Navigation", Navigation);
});
Component:
<ClientOnly>
<Carousel :settings="settings" :breakpoints="breakpoints" :autoplay="2000" :wrap-around="true">
<Slide v-for="(event, i) in eventList" :key="i">
<div class="carousel__item">
<div>#{{ i }} {{ event.title }}</div>
</div>
</Slide>
<template #addons>
<Navigation />
</template>
</Carousel>
</ClientOnly>
Hello,
Having the same issue with nuxt 3 - everything is working alright, however, setting breakpoints throws errors (probably because you cannot access the window in SSR mode.)
Did you ever get this working? I'm looking to add some conditions in the breakpoint object based on length of items.
See #326
These SSR and breakpoint problems are solved with the new nuxt module: #326
Hello ! This is project will be add ssr mode? now we have window is not defined