PHPackages                             ifnot/vue-data-sync - 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. ifnot/vue-data-sync

ActiveLibrary[Utility & Helpers](/categories/utility)

ifnot/vue-data-sync
===================

0237PHP

Since Sep 23Pushed 6y ago2 watchersCompare

[ Source](https://github.com/Ifnot/vue-data-sync-laravel)[ Packagist](https://packagist.org/packages/ifnot/vue-data-sync)[ RSS](/packages/ifnot-vue-data-sync/feed)WikiDiscussions master Synced 2w ago

READMEChangelogDependenciesVersions (2)Used By (0)

VUE DATA SYNC - WIP
===================

[](#vue-data-sync---wip)

Realtime model synchronization between VueJS and Laravel Eloquent Models.

This package allows you to send eloquent events (create, update and delete) through laravel echo to your VueJs app in order to keep all your clients data in sync with your laravel backend.

This package is designed for an **easy integration without deep changes of your backend and frontend**.

Prerequisites
-------------

[](#prerequisites)

> You should have a working Echo installation. [Please follow the official installation steps from the documentation](https://laravel.com/docs/5.7/broadcasting).

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

[](#installation)

```
composer require ifnot/vue-data-sync

```

As it is a WIP, you may want lower your stability options in your `composer.json` :

```
"minimum-stability": "dev",
"prefer-stable": true

```

Then add the service provider into your `config/app.php` **before your Application Service Providers (important)** :

```
Ifnot\VueDataSync\Providers\VueDataSyncServiceProvider::class

```

Quick Start
-----------

[](#quick-start)

Listen your eloquent models for modifications into your `AppServiceProvider` :

```
use Ifnot\VueDataSync\VueData;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        VueData::sync([
            App\Car::class
        ]);
    }
}
```

Now, you can [setup the client side (VueJs)](https://github.com/Ifnot/vue-data-sync)

Fine tuning
-----------

[](#fine-tuning)

Reference a `$synchronizer` class into your model property for overloading default behaviour :

```
class Car extends Model
{
    public $synchronizer = CarSynchronizer::class;

    // [...]
}

class CarSynchronizer extends Ifnot\VueDataSync\Vuex\ModelSynchronizer
{
    /**
     * Return the related models witch should be updated when this model
     * is updated / deleted
     */
    public function getCascadeRelations(): array

    /**
     * Return the frontend name of the model (VueJS side)
     */
    public function getName(): string

    /**
     * Return the channels names to be broadcasted, if false or empty, no
     * message will be sent.
     */
    public function getChannels()

    /**
     * Transform the model object to array in order to be serialized on the
     * broadcast event.
     */
    public function toArray(Model $model): array

    /*
     * Return the meta to be broadcasted with the message
     */
    public function getMeta()

    /*
     * Handle the event emitting
     */
    public function emit(string $event, array $meta = [])
}
```

> Refer to the default behaviour by [looking at ModelSynchronizer](https://github.com/Ifnot/vue-data-sync-laravel/blob/master/src/Model/Transport/ModelSynchronizer.php)

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/60343765?v=4)[ifnot](/maintainers/ifnot)[@ifnot](https://github.com/ifnot)

---

Top Contributors

[![IfnotFr](https://avatars.githubusercontent.com/u/1242308?v=4)](https://github.com/IfnotFr "IfnotFr (10 commits)")

### Embed Badge

![Health badge](/badges/ifnot-vue-data-sync/health.svg)

```
[![Health](https://phpackages.com/badges/ifnot-vue-data-sync/health.svg)](https://phpackages.com/packages/ifnot-vue-data-sync)
```

###  Alternatives

[overtrue/laravel-pinyin

Chinese to Pinyin translator.

531600.6k12](/packages/overtrue-laravel-pinyin)[magento-hackathon/module-eavcleaner-m2

Purpose of this project is to check for different flaws that can occur due to EAV and provide cleanup functions.

80308.9k1](/packages/magento-hackathon-module-eavcleaner-m2)

PHPackages © 2026

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