What is a component in Vue.js?

VueJunior~1 min read

What is a component in Vue.js

A component is a self-contained, reusable interface block in Vue.js that combines markup (HTML), logic (JavaScript), and styles (CSS). Components are the building blocks of a Vue application, out of which the entire user interface is assembled.

The core idea

Components let you split the interface into small, independent parts, each of which:

has its own state (data);
reacts to changes in that data;
can communicate with other components (via props, events, provide/inject);
and can be reused in different places throughout the application.

Example of a simple component

javascript

<!-- Counter.vue -->
<template>
  <button @click="count++">Counter: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
button {
  padding: 8px 12px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 6px;
}
</style>

Here, Counter.vue is a full-fledged component that:

has its own state (count);
updates the interface reactively;
encapsulates its styles using scoped.

Component structure

A typical .vue file (Single File Component, SFC) consists of three parts:

Block	Purpose
`<template>`	Defines the markup that will be rendered
`<script>` or `<script setup>`	Contains the JS logic (data, methods, imports, events, etc.)
`<style>`	Defines the component's styles (the scope can be limited with `scoped`)

Types of components

Global - registered via app.component() and available everywhere.

javascript

import { createApp } from 'vue'
import App from './App.vue'
import Counter from './Counter.vue'

const app = createApp(App)
app.component('Counter', Counter)
app.mount('#app')

Local - imported and declared inside another component.

javascript

<script setup>
import Counter from './Counter.vue'
</script>

<template>
  <Counter />
</template>

Interaction between components

Passing data down: via props

javascript

<UserCard :name="user.name" />

Sending events up: via emit

javascript

<button @click="$emit('like')">Like</button>

Shared context: via provide / inject
Global state: via Pinia, Vuex, or the Composition API

Why components are a key part of Vue

They let you structure code and simplify scaling the project;
They provide reusability and readability;
They make a reactive, modular architecture possible;
They improve the application's testability and maintainability.

Summary

A component in Vue.js is an independent module that combines a template, logic, and styles. It describes how a part of the interface should look and behave, and it updates automatically when data changes.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.