IfnotFr / vue-data-sync-laravel

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


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.


You should have a working Echo installation. Please follow the official installation steps from the documentation.


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) :


Quick Start

Listen your eloquent models for modifications into your AppServiceProvider :

use Ifnot\VueDataSync\VueData;

class AppServiceProvider extends ServiceProvider
    public function boot()

Now, you can setup the client side (VueJs)

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


License:MIT License


Language:PHP 100.0%