vue-laravel-data
Transmit data from laravel to vue
This package is currently in alpha. Any suggestions and found bugs are welcome.
Install
npm install vue-laravel-data --save// oryarn add vue-laravel-data
Import to vue
Vue
Implement into your view
Simply add the vue-directive to any element within your vue-root-element
Examples
Simple in blade-view
// ...
From Laravel-Controller
// From collection$items = collect(['items' => ['name' => 'Item 1'], ['name' => 'Item 2']]); // or from Model$items = App\Item::all(); // return as json to blade viewreturn view('view')->withItems($items->toJson());
Add to blade view
Get data
The data is provided as global window in Laravel-namespace. Laravel already register Laravel as a global window object to bind the csrf-token. We take use of this object and add our data to it.
So getting the data in vue is simple.
Use data only as it is
If you only want to display data, without user-interaction/reactivity, you can simple replace your data-object.
{ thismyKey = Laraveldata // ...}
Use data with reactivity
With the example above we replace the reactive Vue-Object with a simple window-object. Sadly the reactivity is lost in this way. If we want to use our data with vue and keep the reativity, we have to merge the vue-data with our window-object, instead of replacing it Laravel's package.json has lodash as dependency, so we can simply use it to merge our objects.
{ _; // ...}
Set data
We can modify our data with the set-method for current request.
// get datalet items = Laraveldata;// modifyitems;// saveLaraveldata;
Plans & Todos
- Implement better data-handling and checks
- Implement localstorage-plugin (e.g. vue-ls)