Access Auth in VueJS

Question

I'm using Laravel 5.4 with Vue.js 2.0. Is it possible to use Auth::user() in a VueJS template?

For example...

<template>
    <p>{{ Auth::user()->name }}</p>
</template>

export default {}

How can I achieve this?

No you cant if your vueJS app is outside of the laravel scope. So if you want to use user data inside your vueJS template the best way is to make an ajax call when your app get loaded and store user detail into local storage of the browser. And if you dont want to do that just make an ajax call get data to the js. You already know how to make an VueJS app with JS and template both right??? — BetaDev
– BetaDev, Commented Jan 30, 2017 at 9:10
I have developed one application using laravel5.3 and vueJS 2. create api endpoints to serve your client side application. — BetaDev
– BetaDev, Commented Jan 30, 2017 at 9:12
Would this be bad practise? <forum :isAdmin="{{json_encode(Auth::user()->permission()->isAdmin())}}"></forum> — Jenssen
– Jenssen, Commented Jan 30, 2017 at 9:42
oh forum is your vue component wow nice.... but i dont know in that level that which one is the good practice. I shared that how i did for my SPA using laravel and VueJS. Your approach might be a good practice sir. — BetaDev
– BetaDev, Commented Jan 30, 2017 at 9:48
You can (for example) create a wrapping home component and give it the user as property. Then you can simply pass down those props to your child components. — Frnak
– Frnak, Commented Jan 30, 2017 at 9:51

Taylor · Accepted Answer · 2017-02-17 00:30:07Z

4

You can pass the User instance into the component with a prop. For example:

<example-component :user="{{ Auth::user() }}"></example-component>

Then you can access the user's information like so:

<template>

 <p>{{ user.name }}</p>

</template>
export default {
   props : ['user']
}

answered Feb 17, 2017 at 0:30

Taylor

4433 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I made it global. So I've put it on the JS event