SSR compatibility about vue-simple-calendar

[carcinocron]

I think this has something to do with the compiling or the build process.

import CalendarView from 'vue-simple-calendar';
// this produces 'window not defined' in NuxtJS SSR

import CalendarView from '~/node_modules/vue-simple-calendar/src/CalendarView';
// this works in NuxtJS SSR

The main difference is that by default it pulls from the dist/ folder where the build process adds "window" implicitly, for what I assume is intended to be compatibility with multiple AMD/common.js early browser based module systems, where NuxtJS is better off importing the original ES6 to do it's own webpacking.

[BorjaRafols]

I took a look at the source code and couldn't really find the place where window is getting used.
It probably has to do with webpack and the targetLibrary option.

However I found a simple patch for this. Using the plugin is not enought as the application breaks not on render but on the import
// import Calendar from '@/src/components/dashboard/calendar/DashboardCalendarComponent.vue'

Therefore, this is how my components looks now:

export default {
		name: 'p-page-dashboard-calendar',
		components: {
			'calendar': process.browser ? require('@/src/components/dashboard/calendar/DashboardCalendarComponent.vue').default : {},
			'no-ssr': NoSSR
		},
}

Not beautifull nor elegant, but gets it working.

[richardtallent]

Hi Borja,

Thanks for following up on this! I have the 3.0 branch open too and nearing completion, so you might want to check it as well. I'm not aware of anything in the component that would be incompatible with Nuxt, etc., but it's definitely not my area of expertise.

[richardtallent]

Good info... the current webpack build targets are based on some guidance I found online for making components that people could either script in directly (ES5 sans polyfills) or webpack (ES6).

I have no experience with Nuxt, and can't seem to find anything specific to how to make a component compatible with it by default. I'll probably migrate to vue-cli 3 as soon as it's out of beta, I wonder if it provides an OOTB webpack config that will work better with Nuxt?

[walkerzz]

Hi all! Great plugin, but i've got question about nuxt:
So i import calendar as suggest InstanceOfMichael:
import calendarView from '~/node_modules/vue-simple-calendar/src/CalendarView'
components: { calendarView }
<calendar-view event-content-height="2.2em" event-top="64px" :show-date="showDate" :events="events" @show-date-change="setShowDate" @click-event="clickEvent" class="theme-default" ></calendar-view>

And it works great on desktop, but i've got error on iPhones in Browserstock:

I use babel-polyfill in nuxt.config.js in vendor:
build: { vendor: [ 'babel-polyfill' ] }

Any suggestions will be great! Thanks!

[richardtallent]

It's definitely a babel-related issue, somehow your setup is not transpiling ES6-style function declarations. I've never used nuxt, so I don't have any more information. I'll leave this open in case anyone else can help.

[walkerzz]

Thanks for your answer! Can you suggest proper babel config for your plugin?
Thanks!

[richardtallent]

This is the .babelrc what I use in the sample application, which, along with the browserslist in package.json, ensures the Vue code is compiled down to mundane ES5:

{
	"presets": ["env"]
}

Unfortunately, I don't have any idea how one should go about configuring babel for Nuxt. It shouldn't be anything out of the ordinary, as many Vue components use the same ES6 features. If it turns out there are any hints or tweaks I can make that will make SSR easier, I'm happy to add them (or ideally accept PRs from people more familiar with that side of the Vue space).

[richardtallent]

Closing due to non-activity...