Performance in Vue.js: Breaking Down Conditional Code ⚡️

Carlos Rodrigues — Fri, 18 Apr 2025 15:17:51 +0000

Introduction

As Vue developers, we often strive to write clean and efficient code. But as components grow, especially with conditional rendering (v-if and v-else), things can quickly get messy. In this article, I’ll show you a simple technique that not only boosts performance but also improves the maintainability of large conditional blocks into separate components.

The Problem

Let’s say you have something like this in your template:

<template>
  <div>
    <div v-if="isAdmin">
      <!-- Tons of admin-specific logic and HTML here -->
    </div>
    <div v-else>
      <!-- Tons of regular-user logic and HTML here -->
    </div>
  </div>
</template>

At first, this works fine. But as the logic grows, this single file becomes harder to navigate, test, and maintain.

The Solution: Split It Into Components

Instead of stuffing everything into a single file, we can break down the v-if and v-else blocks into their own components.

<template>
  <div>
    <AdminPanel v-if="isAdmin" />
    <UserPanel v-else />
  </div>
</template>

Now your template is clean, easy to read, and each part of the UI is in its own dedicated file.

Performance Benefits

Vue’s component-based architecture allows Vue to be smarter about updates. When you separate logic into components:

Smaller render trees per component
Lazy loading becomes possible (with defineAsyncComponent)
Better reusability
Better reusability

Bonus Tip: Use Async Components

You can go one step further by loading components only when needed:
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AdminPanel: defineAsyncComponent(() => import('./AdminPanel.vue')),
    UserPanel: defineAsyncComponent(() => import('./UserPanel.vue')),
  },
};

This is especially useful if one side of the condition contains a lot of logic that’s rarely used (e.g., admin screens).

Conclusion

Breaking down conditional rendering into components is a small change with a big impact. It improves readability, boosts performance, and aligns with the core philosophy of Vue—building apps with small, reusable pieces.

I hope you found it helpful. Leave a comment if you have used those directives before, and stay tuned for more Vue tips.

Thanks for reading.

Passing lots of props in Vue.js as a Pro 🧑🏼‍🚀

Carlos Rodrigues — Tue, 22 Mar 2022 15:18:37 +0000

When developing a component in Vue, we often end up adding a lot of properties as the component grows and we usually tend to pass these properties individually.

To illustrate that, let's consider that we have the following object:

export default {
  setup() {
    const hero = ref({
      name: 'Batman',
      realName: 'Bruce Wayne',
      identity: 'Secret',
      citizenship: 'American'
    })

    return {
      hero
    }
  }
}

and then we pass the properties of the object individually to the Hero component:

<template>
  <Hero 
    :name="hero.name"
    :real-name="hero.realName"
    :identity="hero.identity"
    :citizenship="hero.citizenship"
  />
</template

Using v-bind

There is nothing wrong with the approach above, but we can make our lives easier by just passing the whole object using v-bind, and automatically all its props will be bound into the component:

<template>
  <Hero v-bind="hero" />
</template

Using v-on

We can do the same with events, passing them via v-on through an object handler:

const heroEventsHandler = {
  onChangeRealName: () => hero.value.realName = 'Robert',
  onChangeIdentity: () => hero.value.identity = 'Public'
}

Note: Assuming that our Hero Component expose these events: @on-change-real-name and @on-change-identity

<template>
  <Hero v-on="heroEventsHandler" />
</template

At the end of the day, instead of having something like this:

<template>
  <Hero 
    :name="hero.name"
    :real-name="hero.realName"
    :identity="hero.identity"
    :citizenship="hero.citizenship"
    @on-change-real-name="onChangeRealName"
    @on-change-identity="onChangeIdentity"
  />
</template

We would have something like this:

<template>
  <Hero 
    v-bind="hero"
    v-on="heroEventsHandler"
  />
</template