Creating a Vue module

[Michael Shelest]

Hello!

I was trying to extend core wishlist functionality (blockwishlist module) and as it's written on vue from my understanding I can't rewrite the logic a lot therefore I decided to create an own module. Using the guide https://devdocs.prestashop.com/1.7/modules/concepts/templating/vuejs/ I created a frontend module using Vue which adds the total number of times the product was added to someones wishlist. It's all working and outputs a badge with this number around the wishlist heart. But it's not dynamic and I can't get this number increased if a customer adds a product to wishlist. To do that I need some way to listen to WishlistEventBus. But these are different vue applications which are created and initialized separately. Based on that there are a couple of questions:

- Is that correct that I created own module with own application like here https://devdocs.prestashop.com/1.7/modules/concepts/templating/vuejs/ ? if so what if I need to create let's say 10 different non-related features, do I need to create the app for each one always? is it not too heavy for the website? (tons of code and includes from node_modules and each module does it on it's own). Or should that be done somehow globally per the website? I wanted to review how core devs would do that but I only can see blockwishlist module and not other modules to check how to link modules.

- If the new app within a new module is fine - how could I listen to the another app EventBus? I noticed that WishlistEventBus is just a window object so thied to use that in the mounted function in my component, it would work (at least it works from console) but when it's run the WishlistEventBus is undefined and looks like I do something wrong in general here.

 b

- Does anyone has any example of own Vue module so I could use that as an example?

Thanks in advance,

Michael