How to retrieve User name in Vue component with Laravel

Question

I have a vue component that will send a message and I want to send the logged in user name. I'm using laravel 5.5

methods:{
        sendMessage(){
            this.$emit('messagesent', {
                message:this.messageText,
                user: {
                    name : {{Auth()::user()->name}} //Here is where it should be
                }
            });
            this.messageText = '';
        }
    }

I already tried using

{{Auth()::user()->name}}
Auth()::user()->name

Both give errors. How can I retrieve the name?

Pass the username through as a prop and use it like you're using `this.messageText`. — Samsquanch, Sep 12 '17 at 17:42
Possible duplicate of [Pass php variable to vue component instance](https://stackoverflow.com/questions/41520258/pass-php-variable-to-vue-component-instance) — Samsquanch, Sep 12 '17 at 17:45

Oyewole A. Samuel · Accepted Answer · 2017-09-12T18:03:13.370

2

Depend on your approach, this can be achieve in different ways
1. Pass in the username from the view <send-message user={{ $user->username }} ></send-message> then inside your vuejs component

export default {
    props: ['user'],
    data(){
        return {
           user: ''
        }
    },
    methods: {
        sendMessage(){
            var user = JSON.parse(this.user)
            //do you thing here
        }
    },
}

2. Bind the user information to window object on your page header

<script>
    window.user = {!! json_encode([
        'user' => $user->username,
    ]) !!};
</script>

edited Sep 12 '17 at 18:03

answered Sep 12 '17 at 17:54

Oyewole A. Samuel

233
2
12

first way worked for me, sorry if it was an obvious question. new to Vue. – Carlos F Sep 12 '17 at 18:09
not related but by any chance you have experience with pusher with laravel and vue? So there is no need for a new question – Carlos F Sep 12 '17 at 18:09
What do you want to achieve? @CarlosF – Oyewole A. Samuel Sep 12 '17 at 18:18
trying to create several "chat rooms", individual chats, group chats and similar stuff. I have problem in how to create the chat rooms and sending the messages to the corresponding room. – Carlos F Sep 13 '17 at 18:00

How to retrieve User name in Vue component with Laravel

1 Answers1