ReferenceError document is not defined with Nuxt 2.5.0

[aozora]

Hi, I get the following error when using it with Nuxt.js, I also tried by wrapping it within the <no-ssr> but I still got the same error:

ReferenceError: document is not defined
node_modules/vue-lazy-youtube-video/dist/vue-lazy-youtube-video.js:1:7909 

[andrewvasilchuk]

Hi, thank you for creating the issue. Sorry, but currently this component does not support SSR.
Maybe, these links can help you:

• https://nuxtjs.org/faq/window-document-undefined
• https://stackoverflow.com/questions/46058544/document-is-not-defined-in-nuxt-js

Also you can add support for SSR. PR's are welcome.

[unr]

If you don't need to render a youtube video for SSR, you can always do it on the client side.

https://nuxtjs.org/api/components-client-only#the-lt-client-only-gt-component

---

I spoke too soon, haha. This doesn't work sadly.

[unr]

@aozora If you import the component directly, you can use it in SSR fine.

#7

I am using a version of this component with no SASS, and I can now freely import it into my builds.

[andrewvasilchuk]

I'm currently in research of separate build for Nuxt.js. Till for that moment you can import component directly:

import LazyYoutubeVideo from 'vue-lazy-youtube-video/src/VueLazyYoutubeVideo.vue'

export default {
  // ...
  components: {
    LazyYoutubeVideo,
  },
  // ...
}

[andrewvasilchuk]

@aozora, 1.3.0-beta.1 is now shipped with SSR support. The only drawback is that you have to import component's style explicitly. See this issue. But you can still import component directly, as @unr stated.

Can we close the issue? 🤔

[aozora]

Thank you, I think we can close it now!