SSENSE/vue-carousel

Feature Request: add server side rendering (Nuxt.js) to vue-carousel

Open

#81 ouverte le 29 août 2017

Voir sur GitHub
 (37 commentaires) (7 réactions) (0 assignés)JavaScript (1 705 stars) (513 forks)batch import
featurehelp wanted

Description

Newbie. I had vue-carousel running great prior to an update, in nuxt I think. Now it simply won't work.

Running vue-carousel locally in component, Terminal: `[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

found in

---> at components/CarouselShow.vue <Pages/index.vue> at pages/index.vue at .nuxt/components/nuxt.vue at layouts/default.vue

` And I guess it is in a loop, because Chrome keeps spinning and eventually I get the dialog box "Do you wish to kill process?"

If I run vue-carousel globally I do not get the warning, but my Slides are static and all Slides show up on the page at once.

Help much appreciated.

Guide contributeur

Stack technique
javascriptvuenuxt
Domaine
frontend
Type d'issue
feature
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
3-5 days
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
stale
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
needs investigation
Prérequis
Vue.js basicsNuxt.js basicsUnderstanding of SSR
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
30
Direction de recherche
The error is due to using `document` in Vue lifecycle hooks that run on the server. To fix, the component must check for browser environment or use client only rendering. The issue comments may have discussed workarounds. Look into using `process.client` in Nuxt or wrapping the component in `<client only>`. Also consider making the carousel import dynamic with `ssr: false`.