Messenger App with Laravel, Vue.JS & Laravel Echo (E02 - Components & Design)

In this small series we'll create a Messenger like application together.
I'll show you how we can structure our components in a logical way, design all with flex box and integrate Laravel Echo to handle sockets notifications.

In today's episode, we will create the rest of our conversation components and work with css flex-box to get the design as we want.

Don't forget to subscribe :)

[WeCodeTutorials]

Please note. The query for fetching messages in 9:30 is not correct and will be fixed in episode 4. Sorry 🤗

[avivehood]

The css part was so helpful. keep doing flexbox design in your series, it's awesome!

[xongooli]

Excellent video - smooth delivery and nicely paced. Great work!

[christopherokonkwo]

Powerful and direct to the point. Its awesome. I have a little hiccups: i want to only return the users who have a conversation with the authenticated user instead of all users except for auth()->user()

[erickzaratehernandez]

Excellent video: D the best course. Greetings from Mexico City

[USDPORYOCTOSEGUNDO]

Excellent series! btw in 16:30 we can use #app instead of .card-body in case you wanna keep that padding for your login and registration card.

[cloud-ifcg]

Awesome tutorial bro, hugs from Brazil, help me a lot

[lucashoffmann]

Perfect!! What type of keyboard do you use? Or i'ts a notebook keyboard? Thanks!

[MrRizzyWizzy]

What extension had the snippets that let you pick "style lang='scss' scoped" from context menu?

[agamurat]

Invalid prop: type check failed for prop "contact". Expected Object, got Null


found in


---> <MessageFeed> at
<Conversation> at
<ChatApp> at
<Root>

[omidrajabi]

&
Uncaught (in promise) Error: Request failed with status code 500
at createError (app.js:653)
at settle (app.js:899)
at XMLHttpRequest.handleLoad (app.js:166)

[RAGHAD-vxkk]

all vue component not appear in my end what is the problem

[TavoHNS]

9:50 when i tried to fix the code like you, adding components, it still shows same error, i tried everything, whats the problem?

[gidaban]

Hello guys, Somebody tied run it with laravel websockets ?

[tarundev]

the logic at 5:00 should be message.from not message.to because you are the one who is going to send the message so who is sending the message is stored into the "from" column in table.

[tchoutangbankouemichelfran]

i apprecitae your tuto a lot. but i need ur help. here is what the console displays at 09:30 when i do npm run wathc:
[Vue warn]: data functions should return an object:

found in

---> <MessageComposer> at
<Conversation> at
<ChatApp> at
<Root>


found in

---> <MessageComposer> at
<Conversation> at
<ChatApp> at
<Root>


found in

---> <MessageComposer> at
<Conversation> at
<ChatApp> at
<Root>