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

Answer 1

For anyone who comes across this thread and is still getting errors, the answer is correctly given above by Mustafa Ehsan, but not explained. Trial and error helped me see it.

My component in newuser.blade.php

Its very important to note the binding method used. On the component above, I wrote only the name of the data binding (like React props), then registered it on the component props (see below). This is how Mustafa wrote his binding in his answer, and works fine. The other, more Vue way to pass the props is with the v-bind: or :, but you have to make sure to use both double-quotes and single-quotes:

:firstname="'{{ $newuser->firstname }}'"

Without both quotes, you get Vue warnings.

AccessRequest.vue: