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
– Belmin Bedak, Commented Mar 22, 2017 at 12:46

tony19 · Accepted Answer · 2022-07-15 05:40:34Z

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.

Matthew Verstraete · Accepted Answer · 2017-03-22 19:07:29Z

1

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

edited Mar 22, 2017 at 19:07

Matthew Verstraete

6,90725 gold badges78 silver badges131 bronze badges

answered Mar 22, 2017 at 14:08

Raghav Patel

8537 silver badges23 bronze badges

Comments

Jquestions · Accepted Answer · 2018-07-15 13:04:19Z

0

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?

edited Jul 15, 2018 at 13:04

answered Jul 15, 2018 at 12:58

Jquestions

1,7302 gold badges25 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related