SSR support?

[andysay]

Hello ! This is project will be add ssr mode? now we have window is not defined

[ismail9k]

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?

[lackoSK]

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.)

[ernestoreddi]

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?

[ismail9k]

@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

[vinksz]

Hello ! This is project will be add ssr mode? now we have window is not defined

Nuxt provides the <ClientOnly> component for purposely rendering a component only on client side. To import a component only on the client, register the component in a client-side only plugin.

Use a slot as fallback until <ClientOnly> is mounted on client side.

      <template #fallback>
        <!-- this will be rendered on server side -->
        <p>Loading Carousel...</p>
      </template>

[ludioao]

If anyone is facing same issue, my temporary solution is here: https://github.com/ismail9k/vue3-carousel/issues/194#issuecomment-1402219199

[sociojs]

For Nuxt users, here is my fix:

1. Rename your plugin filename.js to filename.client.js to make it a client-only render.
2. In the component, just wrap your Carousel element with <ClientOnly> ... </ClientOnly>

[jmdmacapagal]

@t-bee do you mind sharing an example on the plugin and how to use it on the component?

[sociojs]

@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>

[KhalidT2]

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.

[signor-pedro]

See #326

[erickfabiandev]

These SSR and breakpoint problems are solved with the new nuxt module: #326