Introduction: Why Reusable Components Are Important

In modern web development, writing the same code again and again wastes time and leads to errors.

Reusable components help avoid that. With Vue.js, we can create small parts of a website—like buttons, cards, or modals—that we can use again across the project.

At Gopanear, we use Vue.js to build admin panels, dashboards, and apps faster by making components that are reusable, flexible, and easy to manage.

1. What Is a Vue Component?

A component is a block of code that has HTML, CSS, and JavaScript bundled together. It works like a mini webpage section that you can place anywhere in your app.

Example : A <ButtonComponent> that takes a label and color as inputs and can be used in 10 different places with the same logic.

Benefit: Saves time and keeps your UI consistent.

2. Basic Structure of a Vue Component

Here’s how a simple button component looks:

<template>
<button :class="type">{{ label }}</button>
</template>
<script>
export default {
props: ['label', 'type']
};
</script>
<style scoped>
button.primary { background-color: blue; }
button.secondary { background-color: gray; }
</style>

Use Case : Use one button component everywhere—login, signup, forms—with different labels and colors.

3. Using Props to Make Components Dynamic

Props let you change how your component looks or behaves.

Example : A CardComponent with props like title , description , and image.

Benefit : One component can create different types of cards—product cards, blog previews, or profile boxes.

4. Use Slots for Custom Layouts

Slots let you pass in content between the component tags.

<template>
<div class="card">
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>

Use Case : A reusable card that accepts different headers and footers depending on the page.

5. Composition API for Reusable Logic

With Vue 3, the Composition API helps reuse logic like counting, API calls, or form validation.

export function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}

Benefit : Cleaner code and shared logic across multiple components.

6. Build a Simple Component Library

If you reuse the same elements often, it’s smart to group them into a custom library.

Example : Create a /components/ui/ folder for all common elements like Button.vue , Modal.vue , and Input.vue.

Tools : You can also use Vuetify, BootstrapVue, or Element Plus if you want a full UI kit.

7. Import Components the Smart Way

Tip : Register common components globally and lazy-load big ones only when needed.

import Button from '@/components/ui/Button.vue';
app.component('Button', Button);

Benefit : Faster app loading and less code duplication.

Real Example: Product Listing in E-Commerce Platform

For a client running a growing e-commerce store, we built a reusable ProductCard.vue component.

This single component handled product title, price, image, and add-to-cart button. It accepted props for all data fields and supported slots for custom tags like “New” or “Sale.”

We reused it in:

• Homepage featured products
• Category-wise product pages
• Search result lists

Result:

• Reduced code duplication by 60%
• Made UI updates across the site with one edit
• Added new product badges in minutes without rewriting layout code

Case Study: Gopanear’s Logistics Dashboard

One of our clients needed an admin dashboard to manage fleet tracking, roles, and analytics. Instead of repeating code, we built reusable components:

• DataTable.vue : Used for listing drivers, vehicles, and orders with filters.
• ModalForm.vue : Handles user input for different forms using slots.
• RoleBadge.vue : Color-coded role labels for users like admin, driver, and support.

Result:

• Reduced development time by 40%
• Easy updates across the dashboard
• Faster onboarding of new features

Conclusion: Start Small, Grow Fast with Reusable Components

Reusable Vue components help you build faster and smarter. They reduce bugs, speed up development, and make your app easy to manage as it grows.

At Gopanear, we specialize in building robust and scalable frontend applications using Vue.js. Our team focuses on delivering clean, maintainable code and intuitive user interfaces that enhance user experience and ensure long-term performance across platforms.