How to pass logged user from control to vuejs component?

Question

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!

save logged in user in store at the moment user log in to the systsem. then get the user from it . — Nipun Tharuksha

Dawlatzai Ghousi Dawlatzai Ghousi · Accepted Answer · 2021-08-23T11:15:17

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.

How to pass logged user from control to vuejs component?

1 Answers