question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

—> <Carousel> <CarouselShow> at components/CarouselShow.vue <Pages/index.vue> at pages/index.vue <Nuxt> at .nuxt/components/nuxt.vue <Default> at layouts/default.vue <Root>

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

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:7
  • Comments:37 (2 by maintainers)

github_iconTop GitHub Comments

93reactions
iloginowcommented, Dec 31, 2017

Honestly, these “solutions” are not good. This is ridiculous. If you use SSR, you do it for a reason! You want all your content to be available for bots, crawlers etc. Any Vue.js component or library should be aware of that and prevent accessing window or document directly without checking for the environment first!

This IS a HUGE BUG and it should be fixed.

74reactions
mayognaisecommented, Nov 6, 2017

You can simply fix this issue using config with SSR setup as @matthew-dean said.

create plugins/vue-carousel.js:

import Vue from 'vue'
import VueCarousel from 'vue-carousel'

Vue.use(VueCarousel)

in nuxt.config.js:

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

Then it’s ready to use!! 🍙

Read more comments on GitHub >

github_iconTop Results From Across the Web

Feature Request: add server side rendering (Nuxt.js) to vue-carousel -
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...
Read more >
Creating Server-side Rendered Vue.js Apps Using Nuxt.js
In this article, Toptal Freelance Front-end Engineer Ben Jones introduces us to Nuxt.js, a server-side rendering library for Vue.js, inspired by the popular ......
Read more >
Server Side Rendering Carousels in Vue.js - HackerNoon
We've enabled SSR using Nuxt.js to get rid of the spinner and quickly render the site's contents. SSR made the browser to render...
Read more >
Server-side rendering with Vue and Nuxt.js - LogRocket Blog
Importing components in Nuxt ... As long as Logo.vue is inside the components folder, we can safely add the </Logo> to our navBar...
Read more >
How to make use of Vue.js Plugins in Nuxt - DEV Community ‍ ‍
Nuxt.js is a frontend framework built upon Vue.js that offers great development features such as server-side rendering (SSR), ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found