[Feature Request] Upgrade to Vue3

[vycoder]

Would you consider upgrading to Vue3?

[Kinrany]

Totally, although I don't currently use it. Are there any relevant breaking changes?

[vycoder]

There's not much really. Only the onMounted hook I guess. I've went along and did a quick implementation, maybe you can use this as reference #32 .

I haven't tested this. But I did the same thing on one my projects, I'm referencing the VueP5 directly but for this one, I don't think we'll able to globally register the component. We'll most certainly have to use VueP5 as a plugin going forward.

import VueP5 from 'vue-p5'
import { createApp } from 'vue';

import App from './App.vue';

const app = createApp(App);
app.install(VueP5);

Hope this helps.

[Kinrany]

mounted -> onMounted

Do you know if there's an API that exists both in Vue 2 and Vue 3? I'd like to avoid maintaining two separate branches.

I'll probably get rid of .vue source and use plain .js to simplify bundling, if that helps.

I haven't tested this. But I did the same thing on one my projects, I'm referencing the VueP5 directly but for this one, I don't think we'll able to globally register the component. We'll most certainly have to use VueP5 as a plugin going forward.

Hmm, so Vue 3 no longer has the ability to register a component globally, and the user must register every component they use with the app instance? Is that right?

I guess I can use and recommend the new way of doing it, if only for making code future-proof!

[vycoder]

Do you know if there's an API that exists both in Vue 2 and Vue 3? I'd like to avoid maintaining two separate branches.

I was actually trying to figure that one out, like if there's a way where a lib uses Vue2 internally but ejected of some sort to be used in Vue3. Unfornately, I came up with nothing. lol

I'll probably get rid of .vue source and use plain .js to simplify bundling, if that helps.

Yeah cool, something like a render component would probably be better.

Hmm, so Vue 3 no longer has the ability to register a component globally, and the user must register every component they use with the app instance? Is that right?

Afaik, that's just how it is. In Vue3, we can only register a component on an existing app instance, but I'm not really sure I haven't read anything that says otherwise though.

[lucasfelber]

Are you still working on this?

[Kinrany]

No, not really.

The task is simpler now though. Now that Vue 3 is no longer experimental, it's reasonable to just upgrade, without keeping compatibility with Vue 2. I'd accept a PR.

[shkipan]

Hello, could you tell, how things are going with this issue? I wanted to try this library but it does not work with vue 3 😢

[Kinrany]

No changes, someone needs to step up and write a PR 🙂

[shkipan]

@Kinrany , what about this PR? It seems, like it solves vue3 issue https://github.com/Kinrany/vue-p5/pull/32

[Kinrany]

@shkipan it was written more than two years ago, when Vue 3 was still experimental. I give it at least 60% chance that there'll be issues, so I'd rather have someone championing the update.

A major concern with every update is maintaining support for two forms of import: as a Node package and as an HTML script tag with no build step.

[shkipan]

I see, thank you for the answer

[elasticdotventures]

FYI - Vue2 is End of Life as of Dec 31st, 2023 https://v2.vuejs.org/lts/

Also for those looking - consider: https://github.com/Nico-Mayer/p5vue

[Kinrany]

Oh well, thanks for the info. Perhaps I'll find time after the new year.