Vue Components

Vue Components

A Vue application is essentially a tree of components.

 What are Vue Components?

A Vue component is a self-contained unit that includes:

• Template (HTML)

• Logic (JavaScript)

• Style (CSS)

1.  Reusable
2.  Maintainable
3.  Scalable

 Why Components are Important

Without components:

• Code becomes messy

• UI is hard to manage

• Reuse is difficult

With components:

• Clean structure

• Easy maintenance

• Team-friendly development

 Types of Vue Components

 Root Component

The top-level component (usually App.vue).

 Local Components

Used inside specific components.

 Global Components

Available everywhere (not recommended excessively).

 Creating a Vue Component (SFC)

src/components/Hello.vue

 Using a Component

 Props (Passing Data to Components)

Parent → Child

• Props are read-only
• Used to pass dynamic data

 Emits (Child → Parent Communication)

 Slots (Passing HTML Content)

•  Makes components flexible

 Component Lifecycle (Overview)

Every component goes through phases:

• created

• mounted

• updated

• unmounted

Used for:

• API calls

• DOM access

• cleanup

 Component Naming Rules

•  Use PascalCase for components
•  Use kebab-case in templates

 Component Folder Structure (Best Practice)

 Common Mistakes

• Mutating props directly
•  Large components doing too much
• Overusing global components
•  Tight coupling between components

 Best Practices

•  One responsibility per component
• Use props & emits properly
•  Use slots for layout components
•  Split large components
•  Prefer Composition API for logic reuse

 Summary Table

Conclusion

They are the core of Vue development.
Mastering components means you can build clean, reusable, and scalable applications.