Doesn't support SSR

[dmitry-guryev]

Component doesn't support server-side rendering via Node.js, so we can't use it in frameworks like Nuxt.js:

ReferenceError: window is not defined

[irobayna]

same issue with latest version.

Using nuxt.js also created a plugin as it seems to be the prefered way of consuming components but does not work (other components do work not vuejs-datepicker)

On nuxt.config.js you may have a plugins section and by adding this you specify the component is not to be ssr.

{src: '~plugins/datepicker.js', ssr: false }

The plugin is simply defined like this:

import Vue from 'vue'
import VuejsDatePicker from 'vuejs-datepicker'

Vue.use(VuejsDatePicker)

[jvnijnanten]

Same issue here, so it simply does not work with Nuxt.js? Or does anyone know a way to get this datepicker working with Nuxt.js?

[charliekassel]

SSR is not supported right now as I've not had any reason to use it myself.

[rojerv]

i'm use this solution - https://github.com/egoist/vue-no-ssr

Its worked!

[tagmetag]

Use will solve this issue, example:

<no-ssr>
            <Datepicker :value="new Date(2010, 1,  1)"
            placeholder="Select your Date of Birth"
            ></Datepicker>
</no-ssr>

[pepsighan]

Building the project with target: 'node' enables support for SSR. This is due to vue-style-loader which requires the styles to be prerendered in vue components to be used for SSR.

[scottyzen]

@irobayna This worked for me. Thanks

[arenddeboer]

Another tip when using typescript (ts-loader): process.BROWSER_BUILD is a webpack variable indicating client / server build Don't include datepicker in your component declaration and use no-ssr.

if(process.BROWSER_BUILD) {
  const datepicker = require('vuejs-datepicker')
  Vue.component('datepicker', datepicker.default)
}

[RMAICE]

this works for me:

<template>
  <div>
    <date-pick></date-pick>
  </div>
</template>

<script>
export default {
  components: {
    'date-pick': () => import('vuejs-datepicker')
  }
}
</script>

[morficus]

so @pepsighan is partially correct. The root cause of this issue is how vue-style-loader handles builds. But just setting target: "node" in the webpack file is not enough, since that will break things for non-SSR users.

The proper solution is to generate more than one build - an SSR-safe one and a client-only one. Then in package.json specify the SSR-safe build as main and the client-only one as browser. (tagging @charliekassel in case he's interested in tweaking the build process)

Until that happens, then only reliable generic solution appears to be using dynamic imports (as suggested by @RMAICE).

---

edit: just noticed rollup is being used for the build process. in which case... I may submit a PR for this later today

[aslamdoctor]

Hi Guys, Anybody got this fixed?

[alanaasmaa]

so @pepsighan is partially correct. The root cause of this issue is how vue-style-loader handles builds. But just setting target: "node" in the webpack file is not enough, since that will break things for non-SSR users.

The proper solution is to generate more than one build - an SSR-safe one and a client-only one. Then in package.json specify the SSR-safe build as main and the client-only one as browser. (tagging @charliekassel in case he's interested in tweaking the build process)

Until that happens, then only reliable generic solution appears to be using dynamic imports (as suggested by @RMAICE).

edit: just noticed rollup is being used for the build process. in which case... I may submit a PR for this later today

Hei, this solution sounds good for me too? Will you create the PR or should I?

[andersondanilo]

same issue with latest version.

Using nuxt.js also created a plugin as it seems to be the prefered way of consuming components but does not work (other components do work not vuejs-datepicker)

On nuxt.config.js you may have a plugins section and by adding this you specify the component is not to be ssr.

{src: '~plugins/datepicker.js', ssr: false }

The plugin is simply defined like this:

import Vue from 'vue'
import VuejsDatePicker from 'vuejs-datepicker'

Vue.use(VuejsDatePicker)

I tried the plugin bellow and worked:

import Vue from 'vue'
import VuejsDatePicker from 'vuejs-datepicker'

Vue.component('vuejs-datepicker', VuejsDatePicker)

[dedekjulianto]

same issue with latest version. Using nuxt.js also created a plugin as it seems to be the prefered way of consuming components but does not work (other components do work not vuejs-datepicker) On nuxt.config.js you may have a plugins section and by adding this you specify the component is not to be ssr.

{src: '~plugins/datepicker.js', ssr: false }

The plugin is simply defined like this:

import Vue from 'vue'
import VuejsDatePicker from 'vuejs-datepicker'

Vue.use(VuejsDatePicker)

I tried the plugin bellow and worked:

import Vue from 'vue'
import VuejsDatePicker from 'vuejs-datepicker'

Vue.component('vuejs-datepicker', VuejsDatePicker)

hi andersondanilo, I tried refresh browser, and I find error "document is not defined"

[dedekjulianto]

[aslamdoctor]

The only workaround I found to fix this is to use <no-ssr> tags for nuxt 2.9 version or below and use <client-only> tags for above nuxt 2.9 version. I have also written a basic guide in case anybody is interested.

https://aslamdoctor.com/blog/using-vuejs-datepicker-with-nuxt-js/226

[sowinski]

@aslamdoctor The link is broken

[aslamdoctor]

@snovakovic updated :)

[taewo]

I'm not working no-ssr & client-only I solve this problem

make datepicker.js file in nuxt/plugins and register vue component

import Vue from 'vue'
import VuejsDatePicker from 'vuejs-datepicker'

Vue.component('datepicker', VuejsDatePicker)

and register plugin on nuxt.config.js

plugins: [
    {src: '~/plugins/datepicker.js', mode: 'client' }
],

In component call datepicker component

<datepicker :value="date" format="yyyy/ MM/ dd" >

That's it!

[d0peCode]

@alanaasmaa @pepsighan but AFAIK this plugin use rollup to build bundle not webpack.

[P-de-Jong]

this works for me:

<template>
  <div>
    <date-pick></date-pick>
  </div>
</template>

<script>
export default {
  components: {
    'date-pick': () => import('vuejs-datepicker')
  }
}
</script>

This worked great!