staskobzar / vue-audio-visual

VueJS audio visualization components
MIT License
687 stars 109 forks source link

Plans on Updgrading to Vue3 #68

Closed vycoder closed 2 years ago

vycoder commented 3 years ago

I just upgraded my project into Vue3. But I got an error for this package. I realized that there are some breaking changes on the Global API of Vue2.

Any plans on updating to Vue3?

staskobzar commented 3 years ago

I do not think I am going to do it any time soon. But if you know what to do and want to contribute, please, feel free to create a pull request.

vycoder commented 3 years ago

Okay thanks! I'll work on it.

dugudongfangshuo commented 3 years ago

import { h } from 'vue' export default { props, render() { return h('div') }, just correct it , it can work on vue3

staskobzar commented 3 years ago

@dugudongfangshuo can you create a pull request or post working diff, please?

mpapado3 commented 3 years ago

Hello I cannot make it work with VueJS 3 despite the change @dugudongfangshuo wrote. I want to combine it with a inertia laravel project and my app.js is the below:

import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import AudioVisual from 'vue-audio-visual'
import { InertiaProgress } from '@inertiajs/progress';

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,

        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .use(AudioVisual)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

but when I insert the av on the vue file I don't get the player with the component and if I use the

staskobzar commented 2 years ago

Please, try new version 2.3.0 which is compatible with vue3 If it works for you please close the issue

raphaelmenges commented 2 years ago

I have integrated vue-audio-visual (v2.3.1) in my Vue3 (v3.2.21) project as advised in the current README.h and get the following error at startup:

> node_modules/vue-audio-visual/src/components/AvBase.js:1:9: error: No matching export in "node_modules/vue-audio-visual/node_modules/vue/dist/vue.runtime.esm.js" for import "h"
    1 │ import { h } from 'vue'
      ╵          ^

I assume the error is related to this issue 🤔 Perhaps I need to add something along @mpapado3 added to the component? If this is the case, it would be good if it could be described accordingly in the README.

The visualizations look wonderful, looking forward to integrate them!