Pass a variable to VUEJS

You can access that variable if you are using inline JavaScript, but if you use an external file you can't do that unless you grab it from the DOM.

Ok, I understand it so far, but how? :)

@RachidLaasri what I usually do is grab it before initializing Vue.. for example (using jQuery here)

var foo = $("#bar").val(); // or whatever..

var vm = new Vue({
    el: '#demo',
    data: {
    foobar: foo
   }
});

guys did anyone try to use this package ?

https://github.com/laracasts/PHP-Vars-To-Js-Transformer

i think the idea can be implemented with this package easily as we will not need an api or different routes to grab some data we can do most of it in the controller method with returning the view we want

now iam grabbing this package and try it ^^

Following your code, the easiest solution is to pass directly to your data variable of your view model binding like this :

var vm = new Vue({
    el: '#demo',
    data: {
        overview: {!! json_encode($overview->toArray()) !!},
   }
});

@guillaume.caggia only if you're defining the vue code within a blade template, which in (hopefully) most cases is unlikely.

There are multiple ways to do so.

1- You can use inline templates that would allow you to use php.

2- you can send them through properties

3- grabbing them from the DOM with jQuery.

4- Use the nice wrapper that Blue dragon mention

5- Create a provider that returns javascript to the views something like

   public function boot()
    {
        \View::composer('*', function($view){
          

            echo "<script>window.hello = 'a';</script>";
          
        });
    }

I just did this and it's working great for me. Using Laravel 5.4 and Vue 2.x.

In my component, declare a property (props) for the object:

props: ['currentUser'],

On my blade page where the component is instantiated:

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

Note that in the component, I am using camelCase for currentUser, but because html is case-insensitive, you have to use kebab-case (thus, the 'current-user').