How to pass javascript variable from laravel controller to vuejs component

Question

I'm trying to build a page on Laravel 5.4 which contains few data which needs to be manipulated and then sent across the views. My view contains components of the vuejs v2.0. I want those data to be implemented in the components. I tried using the laracasts PHP Vars to JS transformer but unable to get it. I followed the steps by placing "laracasts/utilities": "~2.0" in my composer.json then I added the serviceprovider as mentioned in the documentation, I published the vendor and added the following in config/javascript.php,

'bind_js_vars_to_this_view' => 'Nitseditor.show',

I'm having a dynamic views folder which is currently inside my Nitseditor\home\resources\views Now in my controller I'm having following codes:

public function show()
{
    JavaScript::put([
        'foo' => 'bar',
        'age' => 29
    ]);
    return view(Nitseditor.show);
}

Now first of all it was throwing an error as I see that it was including use MongoDB\BSON\Javascript; then I removed and tried using use JavaScript

Now in the app.js file which is present in my asset folder, I'm including each components and trying to do console.log(foo); but its throwing an error foo not defined.

Answer 1

There are a few ways to do this depending on what you are trying to achieve and how your project is set up. The simplest way is to make a request to your controller from inside your component that returns json. Laravel 5.4 comes with axios so you can use that:

methods: {
  getData(){
    axios.get('/controller/route')
    .then(response => {
      // set your variables from the response
      this.myData = response.data;
    })
  .catch(error => {
    console.log(error);
  });
},
data(){
  return {
    myData: {}
  }
}

If you need child components to access the data then you would need to put that in the parent and pass myData" using props.

You could also create a directive and pass your variable down directly from your blade template:

Vue.directive('init', {
  bind: function(el, binding, vnode) {
    vnode.context[binding.arg] = binding.value;
  }
});

Then you would just need to do:

<div v-init:vars="{foo: 'foo', age: 29}"></div>

And pass vars as props to any component that needs them:

Here's the JSFiddle: https://jsfiddle.net/3e05qwLh/

If you have multiple descendants that rely on your variables you will probably want to look at using vuex.

Answer 2

Dunno if it helps but I use this method for passing variables to javascript:

// in master layout (head section)
<meta name="foo" content="{{ $foo }}">

// in javascript (included or in the template)
foo = $('meta[name=foo]').attr('content');

If you have javascript in the blade template you can use directly this method:

foo = "{{ $foo }}";