Vue3 compatibility

[burzum]

What problem does this feature solve?

Being able to use this lib in vue3. :) Getting this when I import it.

Uncaught TypeError: Cannot read property 'type' of undefined

What does the proposed API look like?

Same as before. :)

[mkd0r]

annoying error

[mengxiong10]

For vue3

npm i vue-datepicker-next

[runxc1]

Is there any separate documentation for this?

[gsedlacz]

Are there any plans to release a Vue 3 compatible version?
The branch vue3 is 433 commits behind master right now.

Despite being relatively hard to find it appears to slowly gain traction:

[mengxiong10]

@gsedlacz The component version for vue3 is a completely different project.
Now the compatible version is placed on the branch of this project, I am completely rewriting it with typescript, and it is expected that a new npm package will be released the end of this year.

[al-hz]

Hello,

Vue3 project is now released ?

[MskHelen17]

It's really great that there is a vue3 compatible version for this library :)
I was just upset that new features are not being added to it. Like 'hover-in-range' cell class, my design relied heavily on it.
Is there an oppurtunity to add this functionality #571 in the near future?

[mengxiong10]

@MskHelen17 Yes, I'll add it and I plan that all feature can be completed by the end of this month.

[al-hz]

Sorry to bother you again. Do you know when will be released the vue3 version ?

[mengxiong10]

@al-hz

npm i vue-datepicker-next

[mengxiong10]

I released a new package vue-datepicker-next for vue3.0.

Breaking Change:
You should use v-model:value to replace v-model because of v-model prop and event default names are changed in vue3.0,

// `vue-datepicker-next` for vue3
<template>
  <date-picker v-model:value="date"></date-picker>
</template>

<script>
import DatePicker from 'vue-datepicker-next'
export default {
  components: { DatePicker }
}
</script>

---

// `vue2-datepicker` for vue2
<template>
  <date-picker v-model="date"></date-picker>
</template>

<script>
import DatePicker from 'vue2-datepicker'
export default {
  components: { DatePicker }
}
</script>

[matko9]

I wanted to upgrade to this new package you released, but I noticed that there is no inline prop anymore which I used until now. Is there any reason why it is removed? I didn't find it.

[mengxiong10]

@matko9 For inline, you can use Calendar component.

<calendar-component v-model:value="value"></calendar-component>

import DatePicker from 'vue-datepicker-next'

const CalendarComponent = DatePicker.Calendar

export default {
  component: { CalendarComponent }
}

[matko9]

Ok, didn't know about that, thanks.
Even if I do use Calendar component, I cannot have the same functionality as before since I cannot pass value-type prop to Calendar and I cannot have datetime picker, I can only pick date.

[mengxiong10]

Ok, didn't know about that, thanks. Even if I do use Calendar component, I cannot have the same functionality as before since I cannot pass value-type prop to Calendar and I cannot have datetime picker, I can only pick date.

Yes, For datetime, you can use Datetime component. For value-type, you should transform the value by yourself.

const DateTime = DatePicker.DateTime

[matko9]

Ok, I will update the code so that it works like that, but I think that it was better to use with the inline prop, there was no need to use two different components and transform values which works for DatePicker. Also, I see that DateTime component doesn't have onChange prop which emits type along with value on DatePicker.
Was there an issue with moving to Vue3 and using inline prop so that isn't an option for now and in the future?

[runxc1]

@matko9 For inline, you can use Calendar component.

<calendar-component v-model:value="value"></calendar-component>

import DatePicker from 'vue-datepicker-next'

const CalendarComponent = DatePicker.Calendar

export default {
  component: { CalendarComponent }
}

Where can we see documentation for the new CalendarComponent? I need to see if it still supports ranges and how it exposes the date range value or if anything else has changed. Also need to see if you can still import the scss in the
same way

[aislanmaia]

I can't use Calendar component and have range functionality.

Should be easy to have inline working again with Vue 3!!!

[aislanmaia]

Oh I see that exists a CalendarRange component that makes the trick!!