[Nuxt / SSR Support] window is not defined

[Tragio]

Describe the bug

Thank you for the amazing work. It is the best-looking and featured JS calendar I could find and very grateful for that!

I'm using Nuxt for front-end development and I can't find a solution to make it work properly. I used https://github.com/nhn/toast-ui.vue-calendar wrapper to try make it work.

However, since Nuxt uses SSR, it will always give window is not defined. I tried different solutions but couldn't find any. Probably, the only one to work would be to import it as a plugin, but doing that way it will bring 503.6K (gzipped: 102.7K) to the main bundle, and that it's a lot.

To Reproduce

Here is a minimal reproduction of Nuxt and tui.calendar https://codesandbox.io/s/nuxt-tui-calendar-2b37r

Thank you very much! 🙂

Edit: SweetAlert2 solved this issue by doing the following https://github.com/sweetalert2/sweetalert2/pull/745/commits/652b6b742eb4c3cec10bda78fd91ac27ebf19442, https://github.com/sweetalert2/sweetalert2/commit/eb3806d0ded6957d625ab3afe44f6ff8da4c43c0

[adhrinae]

@Tragio Hi. Lack of SSR support is not a bug, So I changed the label. Next.js offers dynamic module loading which supports client-only modules. But It looks like Nuxt doesn't support external modules like this.

We're going to support SSR in the next major version, However, It's going to be the next year. But Thanks for pointing this out.

[Tragio]

@Tragio Hi. Lack of SSR support is not a bug, So I changed the label. Next.js offers dynamic module loading which supports client-only modules. But It looks like Nuxt doesn't support external modules like this.

We're going to support SSR in the next major version, However, It's going to be the next year. But Thanks for pointing this out.

Thank you very much. Do you have a more precise ETA for it?

---

I'll leave here the solution for anyone using Nuxt. Just keep in mind that will increase a lot the bundle size until Tui Calendar supports SSR and you can lazy loaded it.

Create a file on plugins folder with .client.js (ex. tui-calendar.client.js) and write the following:

import Vue from 'vue'
import { Calendar } from '@toast-ui/vue-calendar'

Vue.component('Calendar', Calendar)

[adhrinae]

@Tragio We have a goal to release the next major update by the end of next March. But Things can be changed.

[arafays]

Thank you @Tragio I was looking for this and found this issue by stumbling upon your codesandbox instance while google search I think just by adding something like below in documentation or install instructions can work for now and can avoid confusion.

Nuxt

Create a file on plugins folder with .client.js (ex. tui-calendar.client.js) and write the following:

import Vue from 'vue'
import { Calendar } from '@toast-ui/vue-calendar'

Vue.component('Calendar', Calendar)

[Tragio]

Thank you @Tragio I was looking for this and found this issue by stumbling upon your codesandbox instance while google search I think just by adding something like below in documentation or install instructions can work for now and can avoid confusion.

Nuxt

Create a file on plugins folder with .client.js (ex. tui-calendar.client.js) and write the following:

import Vue from 'vue'

import { Calendar } from '@toast-ui/vue-calendar'

Vue.component('Calendar', Calendar)

Hi @arafays 😄 yes you can do that way and it will work, but using that approach will increase a lot the main bundle, since you're importing to the whole library instead of importing locally when you need it.