Vue Components

Vue Components

Components are the fundamental building blocks of any robust Vue application.

They allow you to split the UI into independent, reusable pieces.

Instead of writing one massive HTML file, you build a tree of small, manageable components.

Creating a Component

If you are using a build tool, creating a component is as simple as creating a new .vue file.

For example, you might create a file named ButtonCounter.vue.

This file contains its own unique template and logic, isolated from the rest of the app.

Registering a Component

Before you can use a newly created component, you must import and register it.

In modern Vue 3 using <script setup>, importing a component automatically registers it!

You simply use the import statement to pull the file into your main component.

Using a Component

Once imported, you use the component exactly like a standard HTML tag.

If your file is named ButtonCounter.vue, your HTML tag will be <ButtonCounter />.

You can use this tag as many times as you want!

<template>
  <h1>Here are many independent counters!</h1>
  
  <!-- Using the component 3 times -->
  <ButtonCounter />
  <ButtonCounter />
  <ButtonCounter />
</template>
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

Component Isolation

When you use a component multiple times, each instance is completely independent.

If you click the first button in the example above, its count goes up.

However, the count for the second and third buttons remains exactly the same!

This is because every component instance maintains its own separate reactive state.

Organizing the Component Tree

A standard Vue application usually has an App.vue component at the very top.

Inside App.vue, you might import a <Header>, a <MainContent>, and a <Footer> component.

Inside the <MainContent>, you might import multiple <Article> components.

This nested tree structure makes managing massive websites incredibly easy.