Upgrade Vue to 3.0

[agriffard]

Migrate the ResourceManifest, the dependent scripts, the ContentPicker and the LocalizationContentPicker to use vue.js 3.0

https://www.npmjs.com/package/vue/v/3.0.0

/cc @Skrypt

[jptissot]

SortableJS/Vue.Draggable#881

[Skrypt]

Major version = breaking changes.

[jptissot]

We should wait a couple months for the ecosystem to migrate to it and fix the bugs.

[Skrypt]

Or at least if we migrate do manual testing to make sure nothing is breaking. I'm pretty sure it will break all the draggable components.

[agriffard]

SortableJS/Vue.Draggable#881

There is a https://www.npmjs.com/package/vue-draggable-next package available.

Not sure if we should switch to this one to be compatible with vue 3?

[jptissot]

I would wait a couple months for others to test the vue components for us 😁

[Skrypt]

Well create the PR guys if you think it could potentially work. But test a lot before merging.

[Piedone]

@agriffard any specific reason you closed this? Eventually, we should upgrade. And since then, Vue.Draggable
is also upgraded: SortableJS/Vue.Draggable#942

[agriffard]

There is no CDN available for the latest version:
https://www.npmjs.com/package/vuedraggable/v/4.1.0

The url they give returns a 404:
https://github.com/SortableJS/vue.draggable.next#with-direct-link

<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js"></script>

[Piedone]

That's a bug in Vue.Draggable then that we need before this can be addressed. However, any reason why not keep this issue open?

[Piedone]

Hmm, there's https://github.com/SortableJS/Vue.Draggable and https://github.com/SortableJS/vue.draggable.next. The latter is the project going forward with Vue v3. It appears to have restarted versioning (though this is inconsistent on GitHub/NPM vs the CDN) and the new CDN is here: https://unpkg.com/[email protected]/dist/vue-draggable-next.global.js See: SortableJS/vue.draggable.next#64

[Piedone]

We need this ASAP now, since Vue 2 reaches its EOL by the end of the year: https://v2.vuejs.org/lts/.

[Skrypt]

You have some WIP there: #14256

[Piedone]

Awesome! Do you need some help with that?

[Skrypt]

Yeah, any help would be appreciated. Basically my PR adds the ability to keep Vue 2 and Vue 3 in the solution ; so that we can split the tasks in different PR's afterward. Though, I still need to migrate the media library picker component to be able to say that the PR is a complete Media Library upgrade.

Let me know if you need more details we can do a Teams call.

[Skrypt]

Another suggestion would be to convert all of these to Blazor components. Get rid of the Vue dependency and find something else than the JQuery UI upload component to do this. I upgraded the Vue component to use it as a standalone app for a different project but I definitely would see this rewritten as a Blazor component. @sebastienros

[Piedone]

I'd upgrade Vue instead of a more drastic change, at this point at least. Also, the Vue dependency itself needs to be upgraded in any case, so module authors can depend on the new version.

[Skrypt]

The way the OC admin UI is built is to not depend on Vue at all. Just Bootstrap and some custom Javascript.
It is possible to keep Vue 2 and Vue 3 in the resourceManager for the time that people will migrate their custom modules to Vue 3.

I think most of the work is about migrating the Media Library and the CORS module UI. Of course now that we have a good migration of the Media Library here I'd say just push to migrate everything else for now. We could alternatively create a small Blazor component for the OptionEditor ... we have the choice as this is a smaller component. But definitely agree that the Media Library would take way more time to Blazorize so nothing planned in the short term for this.

Vue dependency itself needs to be upgraded in any case

I think it needs to be added in the resourceManager along with the Vue 2 dependency instead.

[Skrypt]

Also wanted to have a clear opinion about Blazor components and OC from @sebastienros first. That's why I pinged him.

[Piedone]

Yes, we definitely would need to keep the v2 resource too.

[agriffard]

/cc @Skrypt

[Piedone]

Where was this done @agriffard? #14256 is open.

[agriffard]

Closed in favor of #14256

[Piedone]

But that's a PR, we still need an issue to keep track of the request.