Download the PHP package deadsimple/vueeventbus without Composer
On this page you can find all versions of the php package deadsimple/vueeventbus. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download deadsimple/vueeventbus
More information about deadsimple/vueeventbus
Files in deadsimple/vueeventbus
Package vueeventbus
Short Description Create Deadsimple communication between two independent Vue Components using a simple Event Bus
License MIT
Informations about the package vueeventbus
Deadsimple Vue Global Event Bus Magento2 Composer Library
Please note: an Event Bus is NOT the solution for all your cross component communication. But there are tons of scenarios where using Vuex or other state management frameworks are complete overkill for what you try to accomplish. Which is communication between two separate Vue Components, loaded in two complete different sections of your page.
More about Vue Event Buses can be found here
If you want to know more about how to use VueJS in Magento 2 have a look at this repository
Installation
Use composer to install the module: composer require deadsimple/vueeventbus
Usage / Example
Let's start with a use case; on your product detail page on your product header you want to add a button that says: "Add to Wishlist". This button needs to save the product to the wishlist. The wishlist is accessible from your navigation on top of your page and you would like to show a realtime counter that adds up when you click the button "Add to Wishlist". But how can you make these two complete separate components communicate between each other? This is where the Event Bus comes in place.
Let's create the following two files wishlist-button.vue
& wishlist-header-link.vue
:
⚡️⚡️⚡️
wishlist-button.vue
⚡️⚡️⚡️
wishlist-header-link.vue
⚡️⚡️⚡️
In this example you can see we are including VueEventBus
in both files, and it's this small tool that's the glue between both elements for event communication, where we emit the signal from one file to the other and act in the other file based on the event.