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
// or
yarn add vue-laravel-data

Import to vue

import VueLaravelData from 'vue-laravel-data'
Vue.use(VueLaravelData)

Implement into your view

Simply add the vue-directive to any element within your vue-root-element

<div v-laravel-data="{{ $laravelDataAsJSON }}"/>

Examples

Simple in blade-view

<div v-laravel-data="{items: [{name: 'Item 1'}, {name: 'Item 2'}]}"/>

<span v-laravel-data="{items: [{name: 'Item 1'}, {name: 'Item 2'}]}"/>

// ...

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 view
return view('view')->withItems($items->toJson());

Add to blade view

<div v-laravel-data="{{ $items }}"/>

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.

mounted() {
    this.myKey = Laravel.data.get('myKey')
    // ...
}

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.

mounted() {
    _.merge(this.myKey, Laravel.data.get('myKey'));
    // ...
}

Set data

We can modify our data with the set-method for current request.

// get data
let items = Laravel.data.get('items');
// modify
items.push({'name': 'Item 3'});
// save
Laravel.data.set('items', items);

Plans & Todos

• Implement better data-handling and checks
• Implement localstorage-plugin (e.g. vue-ls)