[Vuejs]-Error when passing a laravel route as a props in VueJS

by

1👍

✅

You are able to pass attributes to Vue component through markup. This is called data binding. Like

<nav-bar 
authPath="{{ route('auth') }}">
</nav-bar>

The other Vue way to pass the props is with the v-bind: or :(colon), and you have to use both double-quotes and single-quotes in this case.

<nav-bar 
authPath="'{{ route('auth') }}'">
</nav-bar>

Without both quotes, you will receive Vue warnings.

1👍

Your {{ route('auth') }} is eventually gonna return something like http://127.0.0.1:8000/auth –> This is a string NOT an expression.

Simply remove the : like this authPath="{{ route('auth') }}"

1👍

as @Digvijay said you dont need that : for authPath because its not a vue variable before its passed to vue it will converted to string (also @MuktiRaniGosh way is works too).

but you have another problem and thats is the ” for user prop because of json syntax. use ‘ instead so the code will be

<nav-bar 
:user='@json(Auth::user())'
authPath="{{ route('auth') }}">

</nav-bar>

Leave a comment