How to pass a PHP variable to Vue component instance in Laravel blade?

Question

How can I pass a value of a PHP variable to a Vue component in Laravel blade files?

In my example, I have an inline template client-details, I get this view from Laravel so now I want to pass the id which comes with the url /client/1 to my Vue instance.

My component, which is loaded by Laravel, looks like:

<client-details inline-template>     <div id="client-details" class="">           My HTML stuff     </div> </client-details> 

and mounted by:

Vue.component('client-details', {     data(){         return {             clientId: null         }     }, ); 

I already tried like

:clientId="{{ $client->id }" 

but it does not work.

Answer 1

You have to use Vue's props to be able to pass attributes to Vue's components through markup. Take a look at the following example:

<client-details inline-template client-id="{{ $client->id }}">     <div id="client-details" class="">           My HTML stuff     </div> </client-details> 

In your Vue component:

Vue.component('client-details', {     props: [         {             name: 'clientId',             default:0,         }     ] }); 

Now in other parts of your Vue component, you can access this value as this.clientId.

Issue Details

Please note that in HTML we write attribute name in kebab-case but in Vue side we write it in camelCase. More info in official docs here.

Also, you are using Vue's v-bind shorthand in :clientId="{{ $client->id }}" which means that Vue will deal anything inside double quotes as a JavaScript expression, therefore you may get errors in that case as well. Instead, you should use this format clientId="{{ $client->id }} without a colon.

Answer 2

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').

Also note, if you use blade syntax {{ }} then the data between is run through php htmlspecialchars. if you want unencoded data (which in this case you would), then use {!! !!}