How can I use auth on vue component ? (Vue.JS 2)

Question

My view blade like this :

@if (Auth::user())
    <favorite :id="{{ $store->id }}"></favorite>
@else
    <a href="{{url('/login?red='.Request::path())}}" class="btn btn-block btn-success">
        <span class="fa fa-heart"></span>Favorite
    </a>
@endif

Auth::user() works

But, when I try on vue component like this :

<template>
    ...
    <div v-if="Auth::user()">
        <favorite :id="item.id"></favorite>
    </div>
    <a v-else href="javascript:" class="btn btn-block btn-success">
        <span class="fa fa-heart"></span>Favorite
    </a>
    ...
</template>

<script>
    export default {
        props: ...
        computed:{
            ...
        },
        ...
    }
</script>

It does not works

There exist error like this :

invalid expression: v-if="Auth::user()"

How can I use auth on vue component ?

Are you building SPA or standard multi-page app ? There are no way to pass pure Laravel stuff directly into the `.vue` single file component — Belmin Bedak, Mar 22 '17 at 12:46

score 2 · Accepted Answer · edited Jul 15 '22 at 05:40

You cannot use Laravel variables (PHP) inside your Vue this way.
You should decide whether you want to build standard app or SPA.
If you want to build standard multipage app, you can place your VueJS components between PHP tags exactly as you do in your first example.
If you still want to build standard multipage app but be able to use your Auth::user() value, there is an option for you in point 5.
Pass value of Auth::user() to the VueJS component as prop.

https://v2.vuejs.org/v2/guide/components.html#Props

Use the prop like that:

props: ['auth'],
(...)
<template>
    ...
    <div v-if="auth">
        <favorite :id="item.id"></favorite>
    </div>
    <a v-if="!auth" class="btn btn-block btn-success"> // avoid using v-else as per VueJS docs
        <span class="fa fa-heart"></span>Favorite
    </a>
    ...
</template>

and use your component in the code like: <favorite :id="{{ $store->id }}" auth="Auth::user()"></favorite>

Not sure if you don't have to cast Auth::user() to string/int but I am pretty sure you will figure it out with php.

score 1 · Answer 2 · edited Mar 22 '17 at 19:07

1

You can use auth()->user() instead of Auth::user()

edited Mar 22 '17 at 19:07

Matthew Verstraete

6,335
22
67
123

answered Mar 22 '17 at 14:08

Raghav Rangani

843
7
23

Jquestions · Answer 3 · 2018-07-15T13:04:19.167

I couldn't get the auth user object to work (render without errors) as per accepted answer :(

But I could access and pass through a direct property such as id like so

<example :auth="Auth::user()->id"></example >

Note it has to be "v-bind" because it's a dynamic property and not explicit string.

I also got this to work as another alternative which also produces user ID.

auth="{{ Auth::check() }}"

I'd love to know how to get the object passed into the vue component?

How can I use auth on vue component ? (Vue.JS 2)

3 Answers3