search

w3champions / website

The webpage for the www.w3champions.com community project.
46 stars 53 forks source link

Composition API for App.vue #743

Closed gustav87 closed 3 months ago

gustav87 commented 3 months ago

The reason for this migration is to make the migration to Vue 3 easier later. It was quite troublesome to work with classes in Vue 3 (I had issues getting the theme to work properly), and official stance from the Vue team is to either use the composition api or options api (https://vuejs.org/guide/extras/composition-api-faq.html#relationship-with-class-api).

gustav87 commented 3 months ago

@Rotzbua I made an attempt to migrate App.vue to the composition API as a starting point. Probably not the easiest module to migrate, but serves as a good test to see if it's a reasonable effort.

I'm new to the composition API so I don't know what I'm doing. I managed to get everything working except auth. You can auth, but authCode is not properly populated after you log in, so you can't go to your profile. Do you have any idea..? :D

gustav87 commented 3 months ago

@Rotzbua Hi, I fixed the auth issue and so the composition api for App.vue seems to work good now.

The reason for this migration is to make the migration to Vue 3 easier later. It was quite troublesome to work with classes in Vue 3 (I had issues getting the theme to work properly), and official stance from the Vue team is to either use the composition api or options api (https://vuejs.org/guide/extras/composition-api-faq.html#relationship-with-class-api).

I also had to downgrade Vite from v5 to v4, because there was a problem with hot reloading. After a hot reload, I always got a reference error. 2024-03-28_19-28

I think probably my way of structuring the code in App.vue is bad, and could be done better, but functionality-wise, it seems to run like before.