Vue 3 support

[panuchka]

Describe the feature

Vue 3 is now released, and we would like to see the slider updated to support Vue 3!

Describe the solution you'd like

Vue slider component supports Vue 3

[NightCatSama]

The next version with vue3 support has been released, but it's still in beta, if you find any bugs you can report back to me!

$ yarn add vue-slider-component@next
# npm install vue-slider-component@next --save

[potatoDie]

I'm trying the Basic Example. As soon as I start dragging I get the values 'v', 'a', 'l', 'u' and 'e'

[NightCatSama]

@potatoDie I forgot to specify, because data had a type conflict in vue3.x (vue-class-component@next), so it was temporarily changed to vData. I should change it back later, but for now, try not to set the data prop.

online example:
https://jsfiddle.net/3ea4qbg9/1/

[potatoDie]

@NightCatSama Thanks. I got it working too on CodeSandbox, but locally I'm working with Vite and the bug persists.

[NightCatSama]

@potatoDie Thanks for the feedback, v4.0.0-beta.2 has been fixed.

[potatoDie]

Perfect, thanks!

[terax6669]

I'm migrating a project to Vue 3, here's what I've noticed:

1. When using :v-model the value of the slider was not updated, had to use :modelValue +@change for that. I've noticed that you're using @Prop instead of @Model in

   vue-slider-component/lib/vue-slider.tsx

   Lines 65 to 66 in 20d3d3a

   	@Prop({ default: 0 })
   	modelValue!: Value | Value[]

2. During the migration parts of my component weren't working as intended yet. When passing NaN to :min, :max and :value I got a bunch of JS errors about accessing property x of undefined. At first I thought it was some internal error but it turned out to be my fault in the end. There could be a better way of handling it and giving the user a clearer error message.

<vue-slider
	:value="zoom"    <- NaN
	@change="handleZoomChangeThrottled"
	:contained="true"
	direction="btt"
	:dot-size="23"
	:width="9"
	:drag-on-click="true"
	height="200px"
	:interval="0.001"
	:max="maxZoom"    <- NaN
	:min="Math.floor(minZoom * 1000) / 1000"    <- NaN
	tooltipPlacement="right"
	:tooltip-formatter="zoomTooltipFormatter"
/>

[fgarit-te]

Edit: Will open a separate issue