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
– Samsquanch, Commented Sep 12, 2017 at 17:42
Possible duplicate of Pass php variable to vue component instance — Samsquanch
– Samsquanch, Commented Sep 12, 2017 at 17:45

Oyewole A. Samuel · Accepted Answer · 2017-09-12 18:03:13Z

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, 2017 at 18:03

answered Sep 12, 2017 at 17:54

Oyewole A. Samuel

2332 silver badges13 bronze badges

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

4 Comments

Carlos F Over a year ago

first way worked for me, sorry if it was an obvious question. new to Vue.

Carlos F Over a year ago

not related but by any chance you have experience with pusher with laravel and vue? So there is no need for a new question

Oyewole A. Samuel Over a year ago

What do you want to achieve? @CarlosF

Carlos F Over a year ago

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.

Collectives™ on Stack Overflow

How to retrieve User name in Vue component with Laravel

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related