Vue Creating Components – Modularize Your Vue App (2025 Guide)

Introduction – What Are Components in Vue?

Components are the building blocks of Vue.js applications. They allow you to break your UI into reusable, self-contained units. By creating components, you promote better code organization, reuse, and maintainability.

In this guide, you’ll learn:

• How to define and use Vue components
• Single File Component (SFC) structure
• Registering global and local components
• Real-world examples and best practices

What Is a Vue Component?

A component in Vue is essentially a custom HTML element that you define, complete with its own template, logic, and styling.

Example:

<CustomButton />

Vue then renders this using the logic defined in your component code.

Example – Creating a Basic Component

Step 1: Define a Component

app.component('greeting-message', {
  template: `<h2>Hello from a Vue component!</h2>`
});

Step 2: Use It in Template

<greeting-message></greeting-message>

This will render the H2 message inside the DOM.

Single File Components (SFC)

Vue 3 projects typically use .vue files for each component.

Example: Greeting.vue

<template>
  <h2>Hello, {{ name }}!</h2>
</template>

<script>
export default {
  props: ['name']
}
</script>

<style scoped>
h2 { color: green; }
</style>

Includes template, logic, and styling in a single, organized file.

Registering Components

Global Registration

import Greeting from './Greeting.vue';

app.component('Greeting', Greeting);

Available throughout your entire application.

Local Registration

import Greeting from './Greeting.vue';

export default {
  components: {
    Greeting
  }
}

Scoped to the current component.

Reusable Functional Components

You can create components that accept props and emit events to be reused across your app.

Button Component – BaseButton.vue

<template>
  <button @click="$emit('click')"><slot /></button>
</template>

Usage:

<BaseButton @click="handleClick">Click Me</BaseButton>

Keeps UI consistent and reusable.

Component Props and Custom Events

Passing Props:

<Greeting :name="'Vaibhav'" />

Emitting Events:

this.$emit('submitted')

Use props to send data in, and events to send data out.

Organizing Component Files

For large projects:

/components
  ├── BaseButton.vue
  ├── Header.vue
  ├── Footer.vue
  └── Modal.vue

Structure by type or feature for scalability.

Real-World Example – Product Card

ProductCard.vue

<template>
  <div class="card">
    <img :src="product.image" />
    <h2>{{ product.name }}</h2>
    <button @click="$emit('add-to-cart', product)">Add to Cart</button>
  </div>
</template>

<script>
export default {
  props: ['product']
}
</script>

Usage:

<ProductCard :product="item" @add-to-cart="handleCartAdd" />

Summary – Recap & Next Steps

Vue components allow you to write modular, maintainable, and reusable code. Whether you use simple components or complex, nested ones, they are essential for scaling your application.

Key Takeaways:

• Components are Vue’s core building blocks
• Use SFCs for better organization (.vue files)
• Register components locally or globally
• Pass data with props, communicate with events

Real-World Relevance:
Used in real apps for menus, modals, forms, cards, and full pages—Vue components make your app clean, modular, and scalable.

FAQ Section

How do I create a basic component in Vue?

Use app.component('name', { template: '...' }) or create an SFC .vue file.

What’s the difference between local and global registration?

Global makes it available app-wide, local keeps it usable only in the current component.

How do I pass data to a component?

Use props:

<MyComp :title="'Hello'" />

Can I emit events from a component?

Yes. Use $emit():

this.$emit('clicked')

Should I use SFCs or inline components?

Prefer SFCs for structure, scalability, and IDE tooling.