search

mengxiong10 / vue2-datepicker

A datepicker / datetimepicker component for Vue2
https://mengxiong10.github.io/vue2-datepicker/index.html
MIT License
1.52k stars 406 forks source link

SSR #124

Open romikzo opened 6 years ago

romikzo commented 6 years ago

Support for ssr is planned?

antony commented 5 years ago

Also would love SSR support. It doesn't appear to be too difficult after scanning the codebase.

Meanwhile, for NUXT:

// plugins/datepicker.js
import DatePicker from 'vue2-datepicker'
import Vue from 'vue'

Vue.component('date-picker', DatePicker)
  // nuxt.config.js
  plugins: [
    { src: '~/plugins/datepicker', ssr: false }
  ],
// Component.vue
<template>
  <no-ssr>
    <date-picker />
  </no-ssr>
</template>
jinnyMcKindy commented 5 years ago

Wow datepicker doesn't work in Node + ExpresJS because window is not defined. How do I fix that?

antony commented 5 years ago

@volokolamskspb you'd have to fork and fix the issue.

bfic commented 5 years ago

@antony good job

sushiljic commented 4 years ago 
import Vue from 'vue'
import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css';

Vue.use(DatePicker)

We might need index.css for styling too on plugins/datepicker.js

roryjarrard commented 4 years ago

You definitely need index.css, or you get an SVG icon that fills up half your page, and no calendar.

nickast commented 3 years ago

Do we have any official fix for this amazing datepicker to work with nuxt?

augnustin commented 2 years ago

Recently did a npm update and now I have this error:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
vue.runtime.esm.js:6416 Parent:  div.control
hydrate @ vue.runtime.esm.js:6416
hydrate @ vue.runtime.esm.js:6401
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
hydrate @ vue.runtime.esm.js:6368
hydrate @ vue.runtime.esm.js:6401
hydrate @ vue.runtime.esm.js:6401
hydrate @ vue.runtime.esm.js:6401
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
merged @ vue.runtime.esm.js:3298
hydrate @ vue.runtime.esm.js:6368
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
hydrate @ vue.runtime.esm.js:6368
hydrate @ vue.runtime.esm.js:6401
hydrate @ vue.runtime.esm.js:6401
hydrate @ vue.runtime.esm.js:6401
hydrate @ vue.runtime.esm.js:6401
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
merged @ vue.runtime.esm.js:3298
hydrate @ vue.runtime.esm.js:6368
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
hydrate @ vue.runtime.esm.js:6368
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
hydrate @ vue.runtime.esm.js:6368
hydrate @ vue.runtime.esm.js:6401
hydrate @ vue.runtime.esm.js:6401
hydrate @ vue.runtime.esm.js:6401
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
hydrate @ vue.runtime.esm.js:6368
hydrate @ vue.runtime.esm.js:6401
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
init @ vue.runtime.esm.js:3115
hydrate @ vue.runtime.esm.js:6368
hydrate @ vue.runtime.esm.js:6401
patch @ vue.runtime.esm.js:6483
Vue._update @ vue.runtime.esm.js:3939
updateComponent @ vue.runtime.esm.js:4054
get @ vue.runtime.esm.js:4473
Watcher @ vue.runtime.esm.js:4462
mountComponent @ vue.runtime.esm.js:4067
Vue.$mount @ vue.runtime.esm.js:8405
mount @ client.js:1173
_callee7$ @ client.js:1223
tryCatch @ runtime.js:63
invoke @ runtime.js:293
eval @ runtime.js:118
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
_mountApp @ client.js:1270
mountApp @ client.js:1146
Promise.then (async)
eval @ client.js:229
eval @ client.js:1272
../build/client.js @ app.js:23
__webpack_require__ @ runtime.js:854
fn @ runtime.js:151
0 @ app.js:935
__webpack_require__ @ runtime.js:854
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
Show 72 more frames
17:38:12.840 vue.runtime.esm.js:6417 Mismatching childNodes vs. VNodes:  NodeList [input.input.is-large] [VNode]

along with this error:

TypeError: Object prototype may only be an Object or null: undefined
    at Function.create (<anonymous>)
    at resolveProvided (vue.runtime.esm.js:1768:39)
    at initProvide (vue.runtime.esm.js:4227:22)
    at Vue._init (vue.runtime.esm.js:5680:9)
    at new VueComponent (vue.runtime.esm.js:5814:18)
    at createComponentInstanceForVnode (vue.runtime.esm.js:3280:10)
    at init (vue.runtime.esm.js:3111:45)
    at createComponent (vue.runtime.esm.js:5968:9)
    at createElm (vue.runtime.esm.js:5915:9)
    at updateChildren (vue.runtime.esm.js:6206:11)

I have the following config:

// nuxt.config.js
  plugins: [
    '~/node_modules/avril/js/plugins/datepicker.client.js',
  ],
import Vue from 'vue';
import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/locale/fr';
import 'vue2-datepicker/index.css';

Vue.component('date-picker', DatePicker)

Used like this:

        <client-only placeholder="Chargement du calendrier ...">
          <date-picker />
        </client-only>

I also tried the Vue.use(DatePicker) version without success.

Really confused here...