Vue.js Dynamic Components/Classes for People in a Hurry

Explaining Dynamic Components and Dynamic Classes with examples.

Vue.js like other web frameworks have to be utilized to their fullest and that can not be done without using its dynamic features!

Dynamic Components

Components are reusable in Vue.js instances and in most cases, components won’t be useful unless you can pass data to it.

The dynamic features additionally enable users to switch between two or more components without routing.

Dynamic Classes

The idea remains the same as for dynamic components hence thought about ‘hitting two birds with one stone’ in this article. The common need is to manipulate the look of a given element with CSS classes or style with attribute binding.

Let's start, shall we! 🤓

I will use examples from my project (still under development) which utilize both dynamic components and dynamic classes. The repo of the project you can find it here.

We will start off with dynamic components and follow on with dynamic classes.

<script>
import EnterRoom from '@/components/EnterRoom.vue'
import ChatRoom from '@/components/ChatRoom.vue'

export default ({
name:'App',

components: {
'Main Room': EnterRoom,
'Chat Room': ChatRoom,
},

data () {
return {
currentComponent: 'Main Room',
username: '',
   }
},

☝ ️Import both components and have to declare a variable that corresponds to the current component.

👇🏻 There will be a room selection thus changing the current component dynamically.

methods: {
updateRoom(room) {
this.currentComponent = room
if (this.currentComponent === 'Main Room') {
this.$router.push('/')
}
if (this.currentComponent === 'Chat Room') {
this.$router.push('/chat-room')
}
},
addUser(user) {
this.username = user
}
}
})

Now let us add our component element to our template.

<div id="app"> 
   
<component v-bind:is="currentComponent" v-on:child-room="updateRoom($event)" v-on:user-to-room="addUser($event)"  :user="username">
</component> 
 
</div>

The V-bind directive will bind the attribute component prop to an element in doing so the corresponding component will change dynamically. The v-on directive is receiving data from one of the components to update the chosen room using emit event.

The emit event won't be covered here it was covered shortly in my other post which you can find below.

Learn Vue.js Essentials through a Rock-Paper-Scissors Game

Classes and Style Bindings

<li class=”clearfix2"> 
    <div v-for=”(msg, index) in messages” :key=”index”> 
    <div class=”w-full flex “ v-bind:class=”{‘justify-end’:     User(msg.user)}”> 
    <div class=”bg-gray-100 rounded px-5 py-2 my-2 text-gray-700 relative” style=”max-width: 300px;”> 
    <span class=”block text-blue-400">{{ msg.user }}</span> 
    <span class=”block”>{{ msg.message }}</span> 
    <span class=”block text-xs text-right”>{{msg.timestamp}}</span>     </div> 
</div> 
</div> 
</li>
....
methods: {
User(User) {            
    if (this.user === User) {                
    return true            
      }        
   }    
},

FYI, I am using TailwindCSS. And as you can notice by the third line v-bind directive repeats itself once again only difference is that: class is being added.

The justify-end is the class that will be added IF the condition is being met in this case it runs the method to check if the user who sends the message is you.

You as the user should see it on the right side of your send message while others appear on the right corner.

To end it off there is so much more you can do dynamically with components and classes/styles. I hoped this article helped and if you have any questions feel free to ask as we all are on this learning journey together. ❤

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.