CODEWITHSUNDEEP
laravelvue.js
mstdmstd
mstdmstd

Reputation: 3095

How to pass logged user from control to vuejs component?

in laravel 8/2.6/bootstrap 4.6/Axios app I want to pass logged user from control to vuejs component:

public function index()
{
    $loggedUser = auth()->user();
    return view('chat', [
        'loggedUser' => $loggedUser,
    ]);
}

in blade file :

@extends('layouts.app')

@section('content')

    <div class="container chats">
        loggedUser::{{ $loggedUser}}!!!!!!!!!
<!-- I SEE USER data above : -->

        <user-rooms :loggedUser="{{ $loggedUser }}"> </user-rooms>
    </div>

@endsection

and vue component :

<template>
    <div class="container">
        loggedUser::{{ loggedUser}}
        <!-- I see empty value above outputed -->
    </div>

</template>

<script>

export default {
    name: "Chat",
    components: {},

    props: {
        loggedUser : {
            type: Object,
            required: true,
        },
    },

    mounted() {
        console.log('UserRooms.vue Component mounted loggedUser')
        console.log(this.loggedUser)    // I see undefined outputed
    }, // mounted() {


};
</script>

I tried several direrent cases like :

<user-rooms :loggedUser="{{ json_encode($loggedUser) }}"> </user-rooms>

but failed anyway...

Which way is correct?

Thanks!

Upvotes: 1

Views: 1543

Answers (2)

Edmon Belchev
Edmon Belchev

Reputation: 357

You can also get logged in information with this example:

lets say app.blade.php its your file that loads your page. You can set a script that stores your authentication.

<script>
  window.user = {{!! Auth::user() !!}} 
</script>

Then in your vue component or even better if you are using vuex store you can get the object.

data(){
  loggedUser: window.user
}

Upvotes: 1

Dawlatzai Ghousi
Dawlatzai Ghousi

Reputation: 3978

You should follow these steps to pass auth user in vue component.

You should add a <meta name="user" content="{{ Auth::user() }}"> in

// app.blade.php or whatever you have maybe master.blade.php like below

<head>
    <meta charset="UTF-8">
    @if (Auth::check()) 
      <meta name="user" content="{{ Auth::user() }}">
    @endif 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" 
  ...
  ...

and then in your component inside data object do this action:

 data() {
        return {
            
            loggedUser : document.querySelector("meta[name='user']").getAttribute('content')
        }
    },

and you should see the logged in user in component mounted method:

 mounted() {
        console.log(this.loggedUser);
    },

and now you can use the user object in every where of your component.

Upvotes: 3

Related Questions