You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

vue-laravel-data

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-laravel-data

Transmit data from laravel to vue

1.0.3
latest
Source
npmnpm
Version published
Weekly downloads
2
-50%
Maintainers
1
Weekly downloads
 
Created
Source

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)

Keywords

vue

FAQs

Package last updated on 04 Sep 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts