document is not defined from ssr

[qianlanse]

[cdefy]

Hi, same here!

I followed the local install steps but got this error or the page is trying to load indefinitely and when I force it to stop, I have this : Screenshot_2019-06-05 Screenshot

As it's in a Nuxt.js project, I tried different things like using no-ssr (https://alligator.io/vuejs/hide-no-ssr/) thinking it was maybe a server/client rendering problem. But still not working.

Something really strange just happened, the carousel appears for a few seconds but then the error came back (I was commented, uncommented, moving the import line). Will it be possible it's a question of import order?!

Thanks for any help, ideas...

PS: I'm new to Vue.js world!

[cdefy]

If I try to add the plugin globally and then add this line in nuxt.congif.js : plugins: [{ src: '~plugins/vue-carousel-3d', ssr: false }] then I got a new error : "Server resources are not available!", but with that I'm not sur anymore it's vue-carousel-3d related. :-s

[dario30186]

Hi, you need to import the plugin globally and then edit the file nuxt.config.js as @cdefy said: plugins: [ ... { src: '~plugins/vue-carousel-3d', ssr: false } ]

In order to import a plugin globally, you just need to create a file in PROJECT_FOLDER/plugins/vue-carousel-3d'.js and add the following code:

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

Vue.use(Carousel3d);

then in your html

        <no-ssr placeholder="Loading...">
          <carousel-3d>
            <slide :index="0">
              Slide 1 Content
            </slide>
            <slide :index="1">
              Slide 2 Content
            </slide>
          </carousel-3d>
        </no-ssr>

[suwigyarathore]

Any solution to this. I still have this problem

[cdefy]

<no-ssr></no-ssr> will be deprecated and <client-only></client-only> should be used but I don't think it's enough to fix your problem @suwigyarathore Without knowing what you did it's hard to try to help you. ;)

[Berkmann18]

I'm getting the same error on a Gridsome app and none of the viable options work.

[simon-tma]

You can use

import Carousel3d from 'vue-carousel-3d/src/index.js';

As the src library doesn't use document, just the dist one.

[Berkmann18]

@simon-tma That leads to other issues for me when I tried that.

[7br-uno]

@dario30186 Tanks! Worked perfectly.

[akbarjalolov]

Hello, all of the solutions are not working. If you have any updates, please let me know.

[akbarjalolov]

I found out. When you try @dario30186's way, do not import in the page. It worked for me.

[drdavella]

Just for posterity, here is what my ~/plugins/vue-carousel-3d.js file looks like to get this working:

import Vue from 'vue';
import { Carousel3d, Slide } from 'vue-carousel-3d';

Vue.component('carousel-3d', Carousel3d);
Vue.component('carousel-3d-slide', Slide);

In the code where this is used, there should be no imports from vue-carousel-3d. When using the components, use the names given as the first argument to Vue.component.

[Disolm]

for Nuxt

in nuxt.config.js

plugins: [
    {
      src: '~plugins/vue-carousel-3d.js',
      ssr: false
    }
  ],

in plugins/vue-carousel-3d.js

import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);

in myComponent.vue

<client-only>
          <carousel3d>
            <slide
              v-for="(slide, i) in getPictures()"
              :index="i"
              :key="slide.id"
            >
              <template
                slot-scope="{ index, isCurrent, leftIndex, rightIndex }"
              >
                <img
                  alt=""
                  :data-index="index"
                  :class="{
                  current: isCurrent,
                  onLeft: (leftIndex >= 0),
                  onRight: (rightIndex >= 0)
                }"
                  :src="slide.src"
                >
              </template>
            </slide>
          </carousel3d>
</client-only>