[REFACTOR] Migrate provide / inject syntax to reusable composables

[maartenvanhunsel]

Description

Numerous composables we utilize are closely integrated with each other. Nevertheless, the current integration approach renders several key Nuxt/Vue features unusable, which is regrettable. Specifically, Plugins and Middlewares become inaccessible for Shopware-related composables due to the necessity of utilizing useContext with inject(), a feature restricted to the setup function.

As a developer, it is crucial to have the user context at the earliest stage possible. By fetching data from the app.vue, we inadvertently overlook numerous valuable functionalities that could enhance the user experience.

Use Case

Authentication

Proposed Solution

I recommend adopting a more composable approach such as useAuth from @sidebase/nuxt-auth. This solution is remarkably user-friendly, eliminating the requirement for provide and inject.

Alternatives Considered

I have reviewed https://github.com/shopware/frontends/issues/26, and I firmly believe that this approach is not sustainable. It risks misrepresenting the core concepts that should guide our efforts.

Additional Context

I am happy to assist and engage in discussions for a sustainable solution that allows us to leverage the best of both (Shopware / Nuxt) worlds.

[maartenvanhunsel]

@elkmod see refactor demo as we discussed earlier.

• Stackblitz (https://stackblitz.com/~/github.com/maartenvanhunsel/shopware-nuxt-3-refactor)
• Github (https://github.com/maartenvanhunsel/shopware-nuxt-3-refactor)

[ignasradzius]

I like your idea as I ran into limitation of using useUser composable in the middleware as well.