Vue3 Migration

[ChunkyProgrammer]

Vue3 Migration

Pull Request Type

• Other - migrate to vue3

Description

This PR migrates FreeTube to Vue3. From what I can tell, this mostly works but I'd like to do some more investigation and testing (hence the draft PR). I might close this PR if I don't have enough time to fix it but the existing code should be useful for anyone who wishes to take a stab at the vue 3 migration

upgrade vue to 3.3.10
upgrade vue-i18n to 9.8.0
upgrade vue-observe-visibility to 2.0.0-alpha.1
upgrade vue-router to 4.2.5
upgrade vuex to 4.1.0

Screenshots

Testing

• daily drive, if an error occurs that you cant reproduce in the development branch then report it

Desktop

• OS: Windows
• OS Version: 10
• FreeTube version: 0.19.1

[absidue]

Haven't done any testing or a proper code review yet.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[absidue]

Refreshing subscriptions errors in formatNumber.

[absidue]

The build warnings can be fixed by removing the set and del imports and replacing them with direct object modification, as Vue 3 can properly detect property changes.

set(x, y, z) can be replaced by x[y] = z

del(x, y) can be replaced by delete x[y]

[PikachuEXE]

Notes for these new constants (global feature flags)
https://github.com/vuejs/core/blob/v3.3.11/packages/vue/README.md#bundler-build-feature-flags

[PikachuEXE]

1

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[absidue]

To add back the fade transition, you will need to rename the CSS class in the App.css file as mentioned here: https://v3-migration.vuejs.org/breaking-changes/transition.html#migration-strategy

As I can't leave comments on unchanged files, here is the code diff for the App.ccs file:

- .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+ .fade-enter-from, .fade-leave-to {
  opacity: 0;
}

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[ChunkyProgrammer]

This PR would be a good starting point to look at when creating a Vue migration PR but this is not something that I would want to maintain at this time so I will be closing this

[kommunarr]

Thanks for the effort you did put into this @ChunkyProgrammer, as it is very good. Whenever you have the time to answer, would you be comfortable sharing the remaining (potential) challenges with a Vue 3 Migration as you understand it that were not covered in this PR, and are not already included in this chore card? I guess I'm wondering if having this for v0.23 would be a feasible landmark in our roadmap.