SSR window is undefined

[xavi7th]

In a server side render, the exposed window object causes my app to crash.

Testing for the existence of window object before calling should fix this

[s950329]

Hi @xavi7th , I have no experience in SSR, can you tell me how to fix this problem or create a PR for that? Thanks very much 🙏🏽.

[xavi7th]

Hi @s950329, thanks for the reply.

The fix is pretty straightforward. Everywhere you call the window object, just wrap it in a check. Something like this

if (typeof window !== 'undefined') { window.doStuff; } The same thing would go for the document objects.

The reason for the necessity of this is that for server side renders, there is no window and document objects defined.

Checkout https://medium.com/@codebeast_/why-your-third-party-plugin-dont-work-in-nuxt-and-how-to-fix-it-d1a8caadf422 for more info.

[ali-turki]

here how you can use vue-owl-carousel in SSR/Nuxt

<carousel v-if="isNuxtReady">
  <img src="https://placeimg.com/200/200/any?1">
  <img src="https://placeimg.com/200/200/any?2">
  <img src="https://placeimg.com/200/200/any?3">
  <img src="https://placeimg.com/200/200/any?4">
</carousel>

<script>
  const carousel = () => window && window !== undefined ? import("vue-owl-carousel") : null;
  export default {
    components: { carousel },
    data() {
      return {
        isNuxtReady: false,
     }
    },
    mounted() {
      const vm = this;
      if (process.browser) {
        window.onNuxtReady(app => {
          console.log("Nuxt ready!");
          vm.isNuxtReady = true;
        });
      }
    },
  }
</script>

[amaleky]

here how you can use vue-owl-carousel in SSR/Nuxt

<carousel v-if="isNuxtReady">
  <img src="https://placeimg.com/200/200/any?1">
  <img src="https://placeimg.com/200/200/any?2">
  <img src="https://placeimg.com/200/200/any?3">
  <img src="https://placeimg.com/200/200/any?4">
</carousel>

<script>
  const carousel = () => window && window !== undefined ? import("vue-owl-carousel") : null;
  export default {
    components: { carousel },
    data() {
      return {
        isNuxtReady: false,
     }
    },
    mounted() {
      const vm = this;
      if (process.browser) {
        window.onNuxtReady(app => {
          console.log("Nuxt ready!");
          vm.isNuxtReady = true;
        });
      }
    },
  }
</script>

doesnt work, webpack will import anyway, you must wrap source code in if condition:

if (typeof window !== 'undefined' && typeof document !== 'undefined') { ... }

[Paul-Hebert]

Nuxt also has the client-only component which may help: https://nuxtjs.org/api/components-client-only

[anakincoresdev]

I use native SSR. Write this code in frontend entry file:

if (typeof window !==  'undefined') {
    const carousel = () => import('vue-owl-carousel');
    Vue.component('carousel', carousel);
}

Template:

    <carousel>
        <div>Slide 1</div>
        <div>Slide 2</div>
    </carousel>

[RobertBar]

I am using nuxt with SSR and I imported the component the following way:

components: {
    'carousel': typeof window !==  'undefined' ? () => import('vue-owl-carousel') : '',
    'FeaturedCategories': FeaturedCategories,
    'PostItem': PostItem,
    'SimpleAnnouncements': SimpleAnnouncements
},

and inside the template i ma using the <no-ssr> tag:

       <no-ssr>
          <carousel :nav="false" :items="1">
            <div v-for="review in approvedReviews" :key="review.id">
              <div class="testimonial">
                <figure class="mb-4">
                  <img
                    v-if="review.user_image"
                    :src="$getAsset(review.user_image)"
                    alt="Image"
                    class="img-fluid mb-3"
                  />
                  <img v-else src="~/assets/images/avatar.png" class="img-fluid mb-3" />
                  <p>{{ review.user_name }}</p>
                </figure>
                <blockquote>
                  <p>&ldquo; {{ review.body }} &rdquo;</p>
                </blockquote>
              </div>
            </div>
          </carousel>
       </no-ssr>