Crafting an innovative design and logic for a dynamic chatroom using Laravel and Vue

Question

Crafting an innovative design and logic for a dynamic chatroom using Laravel and Vue

I'm currently developing a private chatroom feature on my Laravel app. Let me walk you through how it functions - there's a button that triggers a bootstrap modal, and inside that modal, I've embedded a Vue component. Everything seems to be functioning properly, however, I'm facing an issue. How can I display the messages I sent on the left side and the replies on the right? Additionally, I'm encountering problems with some text overlapping the wrapper.

Modal

<div id="messagemodal">
    <userprofilemessagemodal-component 
     :chatroom_id="{{ $chatroom->id }}" 
     :user_id="{{ Auth::user()->id }}" 
     :receiver="{{ $data->id }}"
    >
    </userprofilemessagemodal-component>
  </div>

Vue Component

<div class="container-fluid p-3 roombody">
   <div v-for="roommsg in roommsgs" v-bind:key="roommsg.id">
     <div class="container">                        
       <p id="roommsg" class="rounded-top rounded-bottom p-1 text-white"> 
         {{ roommsg.message }} 
       </p>                                       
     </div>                    
   </div>
 </div>

Fetched Array Object Structure

id: '',
message: '',
chatroom_id: '',
user_id: '',
receiver_id: '',
created_at: '',
updated_at: '',

Is it possible to achieve all this through styling alone? Appreciate your help! PS. I haven't included all the code snippets, just the ones I believe are essential for understanding. Let me know if you need more clarification :)

css laravel vue.js

Answer 1

Answer №1

If you're working with a Vue component, you can handle CSS classes in this way. Remember that you'll need to write the necessary CSS for this to work properly.

<div class="container-fluid p-3 roombody" :class="sender_participant">
    <div v-for="roommsg in roommsgs" v-bind:key="roommsg.id">
        <div class="container">                        
            <p id="roommsg" class="rounded-top rounded-bottom p-1 text-white"> {{ roommsg.message }} </p>                                       
        </div>
    </div>
</div>

For the script part:

export default {
    ....
    computed :{
        sender_participant(){
           return this.user_id==this.logged_in_user ? 'right' : 'left';
        }
    },
}

You should verify whether the sender is the logged-in user. The example above assumes this.logged_in_user contains the ID of the current user.

There are many ways to approach this, but this method is straightforward for beginners to understand.

Answer 2

If you're working with a Vue component, you can handle CSS classes in this way. Remember that you'll need to write the necessary CSS for this to work properly.

<div class="container-fluid p-3 roombody" :class="sender_participant">
    <div v-for="roommsg in roommsgs" v-bind:key="roommsg.id">
        <div class="container">                        
            <p id="roommsg" class="rounded-top rounded-bottom p-1 text-white"> {{ roommsg.message }} </p>                                       
        </div>
    </div>
</div>

For the script part:

export default {
    ....
    computed :{
        sender_participant(){
           return this.user_id==this.logged_in_user ? 'right' : 'left';
        }
    },
}

You should verify whether the sender is the logged-in user. The example above assumes this.logged_in_user contains the ID of the current user.

There are many ways to approach this, but this method is straightforward for beginners to understand.

Answer 3

Answer №2

Great News!

I have discovered a solution to the issue I was facing in my chatroom and wanted to share it with others who may be experiencing the same problem.

Vue Component

<!-- this code is for displaying messages of logged-in user -->
<div id="roommsguser" v-if="roommsg.user_id === user_id">
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>

 <!-- this code is for displaying messages of other users -->
<div id="roommsgguest" v-else>
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>

Next, in my CSS styling:

CSS

#roommsguser{
    text-align: right;  
}

#roommsguser span{
    color: white;
    padding: 5px;
    background-color: #0080ff;
    border-radius: 30px;
}

#roommsgguest{
    text-align: left;  
}

#roommsgguest span{
    color: white;
    padding: 5px;
    margin: 3px;
    background-color: #14487C;
    border-radius: 30px;
}

#roommsgtime{
    font-size: 60%;
    color: #ececec;
}

Although I'm not entirely certain if this is the most optimal approach, it has proven effective on my end :)

Answer 4

Great News!

I have discovered a solution to the issue I was facing in my chatroom and wanted to share it with others who may be experiencing the same problem.

Vue Component

<!-- this code is for displaying messages of logged-in user -->
<div id="roommsguser" v-if="roommsg.user_id === user_id">
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>

 <!-- this code is for displaying messages of other users -->
<div id="roommsgguest" v-else>
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>

Next, in my CSS styling:

CSS

#roommsguser{
    text-align: right;  
}

#roommsguser span{
    color: white;
    padding: 5px;
    background-color: #0080ff;
    border-radius: 30px;
}

#roommsgguest{
    text-align: left;  
}

#roommsgguest span{
    color: white;
    padding: 5px;
    margin: 3px;
    background-color: #14487C;
    border-radius: 30px;
}

#roommsgtime{
    font-size: 60%;
    color: #ececec;
}

Although I'm not entirely certain if this is the most optimal approach, it has proven effective on my end :)

Crafting an innovative design and logic for a dynamic chatroom using Laravel and Vue

Answer №1

Answer №2

Great News!

Similar questions

Solving the Issue in Laravel: Resolving the Error 'Attempting to access the country property of a non-object'

Choose each day's time slot on the jQuery FullCalendar version 2.x

Are CSS generated elements limited to text content only?

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

Eliminate the space between the navigation bar and carousel when using Materialize with Vue.js and Laravel

Can you provide some examples of CSS code snippets?

Oops! There was an unhandled error: TypeError - Unable to retrieve property 'data' as it is undefined

Troubleshooting: Inability to use the v-html attribute in VueJS

Vue's watch function failing to trigger

vuex causing data loss when the page is refreshed

Activate the router-link on v-tab only when text is clicked on

What are some possible solutions for resolving the CORS issue with proxies in a production environment?

Modify the button's background color for Django's image upload field

Steps for setting up a variable for a slot in Vuetify:

Text with gradient overlays

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

Updating paths to static assets in Vue can help improve the performance of your

The div elements are constantly shifting positions when viewed in Internet Explorer

What is causing my HTML display:inline-block to not work properly?

What is the best way to delete a CSS class from a specific element in a list using React?