PHPackages                             deadsimple/vueeventbus - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. deadsimple/vueeventbus

ActiveMagento2-module[Utility & Helpers](/categories/utility)

deadsimple/vueeventbus
======================

Create Deadsimple communication between two independent Vue Components using a simple Event Bus

1.1.1(5y ago)02.2k↓30%MITJavaScript

Since Apr 16Pushed 5y agoCompare

[ Source](https://github.com/Deadsimple-ecommerce/VueEventBus)[ Packagist](https://packagist.org/packages/deadsimple/vueeventbus)[ RSS](/packages/deadsimple-vueeventbus/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (3)Used By (0)

[![Latest Stable Version](https://camo.githubusercontent.com/9166c051953b3e3356e3d602d1f71d90ed89f9ffaef0ab381213caa1a9e69bdf/68747470733a2f2f706f7365722e707567782e6f72672f6465616473696d706c652f7675656576656e746275732f762f737461626c65)](https://packagist.org/packages/deadsimple/vueeventbus) [![Total Downloads](https://camo.githubusercontent.com/535e18609d173062a58ab56a76fdfc6f4eb89d9158df045cc23d46de95b375bd/68747470733a2f2f706f7365722e707567782e6f72672f6465616473696d706c652f7675656576656e746275732f646f776e6c6f616473)](https://packagist.org/packages/deadsimple/vueeventbus) [![License](https://camo.githubusercontent.com/1b99a7754582b222ab3475b88ad57973c72787836758a18680f45b9c8c8088bf/68747470733a2f2f706f7365722e707567782e6f72672f6465616473696d706c652f7675656576656e746275732f6c6963656e7365)](https://packagist.org/packages/deadsimple/vueeventbus)

Deadsimple Vue Global Event Bus Magento2 Composer Library
=========================================================

[](#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](https://alligator.io/vuejs/global-event-bus/)

If you want to know more about how to use VueJS in Magento 2 have a look at [this repository](https://github.com/Deadsimple-ecommerce/VueLibrary)

Installation
------------

[](#installation)

Use composer to install the module: `composer require deadsimple/vueeventbus`

Usage / Example
---------------

[](#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`

```

       Add to Wishlist

define([
    'Vue',
    'VueEventBus',
], function (Vue, EventBus) {

    Vue.component('wishlist-button', {
        template: template,
        methods: {
            addToWishlist() {
                // You probably want to save the product in a wishlist collection somewhere, but I'm leaving this out in this example

                EventBus.$emit('addedToWishlist'); // Transmit a signal
            }
        }
    });

});

```

⚡️⚡️⚡️

`wishlist-header-link.vue`

```

        My whishlist ( {{ counter }} )

define([
    'Vue',
    'VueEventBus',
], function (Vue, EventBus) {

    Vue.component('wishlist-header-link', {
        template: template,
        data() {
            return {
                counter: 0
            }
        },
         mounted() {
            this.getCount();

            const self = this;

            // Listen to the Event Bus for the transmitted signal set in the other file and fire a
            EventBus.$on('addedToWishlist', function() {
             this.counter = this.counter + 1;
            })
         }
    });

});

```

⚡️⚡️⚡️

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.

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 85.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~166 days

Total

2

Last Release

2047d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7f3d6ed37e08e7303491ad700762cd7e23bd2301b64557b7398e8fb2ec191e3f?d=identicon)[mmeester](/maintainers/mmeester)

---

Top Contributors

[![mmeester](https://avatars.githubusercontent.com/u/655965?v=4)](https://github.com/mmeester "mmeester (6 commits)")[![dverleg](https://avatars.githubusercontent.com/u/7334343?v=4)](https://github.com/dverleg "dverleg (1 commits)")

### Embed Badge

![Health badge](/badges/deadsimple-vueeventbus/health.svg)

```
[![Health](https://phpackages.com/badges/deadsimple-vueeventbus/health.svg)](https://phpackages.com/packages/deadsimple-vueeventbus)
```

###  Alternatives

[yireo/magento2-webp2

Magento 2 module to add WebP support to the Magento frontend

2091.2M7](/packages/yireo-magento2-webp2)[tig/postnl-magento2

TIG Magento 2 PostNL extension

58544.2k4](/packages/tig-postnl-magento2)[lillik/magento2-price-decimal

Magento 2 Price Decimal Precision

111147.5k](/packages/lillik-magento2-price-decimal)[nosto/module-nostotagging

Increase your conversion rate and average order value by delivering your customers personalized product recommendations throughout their shopping journey.

27659.1k4](/packages/nosto-module-nostotagging)[magepal/magento2-customeraccountlinksmanager

Customer Account Links Manager for Magento2 allows you to quickly and easily remove unwanted links from customer account dashboard

4084.9k](/packages/magepal-magento2-customeraccountlinksmanager)[doofinder/doofinder-magento2

Doofinder module for Magento 2

13204.0k1](/packages/doofinder-doofinder-magento2)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)