Moveable: Vue.js support?

[probil]

Hi, @daybrush
Thanks for your library. Looks cool.

Is Vue.js support planned?

[daybrush]

@probil

Not yet, but when it comes to official release, it will support a framework like vue and angular.

Now you can make it in the following ways.

<div ref="target"></div>


mounted() {
    const moveable = new Moveable(document.body);

    moveable.target = this.$refs.target;
}

[ChristianKienle]

@probil

Not yet, but when it comes to official release, it will support a framework like vue and angular.

Now you can make it in the following ways.

<div ref="target"></div>


mounted() {
    const moveable = new Moveable(document.body);

    moveable.target = this.$refs.target;
}

I believe this should also work:

<div />

mounted() {
    const moveable = new Moveable(document.body);
    moveable.target = this.$el;
}

[probil]

Thanks for your answer @ChristianKienle
It looks really easy to use. I wonder what is the reason of having react/preact-specific packages then (they look much more complex inside)? 🤔

I'm going to create a simple POC with Vue today. Maybe it will be useful to somebody else.

[daybrush]

@probil

The real code of Moveable is in React
The React code is converted to Preact and the Preact code is converted to Vanilla format.

It's easy to develop with React and JSX, so I chose React.
The reason I converted it to Preact is because it is much lighter than React and it is better to use in Vanilla.

[probil]

WIP: https://github.com/probil/vue-moveable
DEMO: https://vue-moveable.netlify.com/

[daybrush]

@probil
Oh, it looks very good.

[probil]

Just released vue-moveable version v0.1.3:

• based on [email protected]
• can be installed from NPM
• can be used without bundler (UMD)
• support all the events and properties that moveable support
• supports Hot Module Replacement
• supports vue-router
• all properties are reactive
• interactive demo on codesandbox

The only issue I have is library size - it's ~70kb min, and 22kb min gzip, it's not a big deal since we can use dynamic imports but I would like it to be smaller :)

[daybrush]

@probil

I will add your vue-moveable to README soon.