Open qianlanse opened 5 years ago
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!
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
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>
Any solution to this. I still have this problem
<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. ;)
I'm getting the same error on a Gridsome app and none of the viable options work.
You can use
import Carousel3d from 'vue-carousel-3d/src/index.js';
As the src library doesn't use document
, just the dist one.
@simon-tma That leads to other issues for me when I tried that.
@dario30186 Tanks! Worked perfectly.
Hello, all of the solutions are not working. If you have any updates, please let me know.
I found out. When you try @dario30186's way, do not import in the page. It worked for me.
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
.
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>