[Feature Request] Vue 3 Support

[cgarofalo]

It would be great if this package could be updated for use with Vue 3.

[iantearle]

Try swapping out beforeDestroy for beforeUnmount - works fine with Vue3 following that.

[bramchi]

I got a require is undefined error when importing vue-swing into a Vue 3 project.
But managed to fix that by using this CommonJS plugin for Vite.
Now vue-swing works fine in my Vue 3 project 🎈

Hope this helps someone!

[just-the-v]

@bramchi can you develop a little bit please,
I'm on a quasar project using vite and i just do not understand how to use vite-plugin-commonjs
I'm stuck for 4 days aha

[bramchi]

@beeleethebee It has been a while, but I believe I just installed that CommonJS plugin, set it as a plugin in the vite config and then Swing worked. If you follow the instructions from the plugin's readme, you should be good to go. What part are you struggling with?

[just-the-v]

Hi ! Ty for your answer aha

Here is the interesting par of my quasar.config.js

As you can see i really followed the readme provided by vite-commonjs

i also added console.log on viteConfig and viteConf.optimizeDeps.esbuildOptions to be sure that the project build with the options

And i see them !

But when i go on my page :

<template>
  <VueSwing
        @throwout="() => console.log('throwout')"
        @throwin="() => console.log('throwin')"
        :config="{}">
        <div style="width: 300px; height: 300px; background-color: black"/>
      </VueSwing>
</template>
<script setup>
import VueSwing from 'vue-swing'
</script>

I have this errors :

the div appear but nothings happen.

Do you have any clue ? @bramchi

[bramchi]

@beeleethebee My setup was just plain Vue 3 with Swing. I'm not familiar with Quasar.
Maybe you can try to get Swing running without Quasar, to determine if the Quasar context is messing with things.

The ... is not a constructor error feels like a generic one. Have you tried looking for similar issues on the Quasar GitHub, or asking for help there?

[dustydust]

@beeleethebee the problem is the rebound-js facebook library can't export module in "exports way", because you use Vite, so rebound object store itself in window.rebound

In Stack.js (swing package) you can add something like

var construct = function construct() {
    stack = {};
    _rebound2.default = window.rebound /* added line */
    springSystem = new _rebound2.default.SpringSystem();
    eventEmitter = (0, _sister2.default)();
    index = [];
};

In Card.js you can add something like example above and it will work.