Defining components in Vue

Introduction

Components let you build small, reusable parts of a webpage. They help organize your code and make it easier to manage.

You want to create a button that is used in many places with the same style and behavior.

You need to split a large webpage into smaller, manageable pieces.

You want to reuse a form input with validation in different parts of your app.

You want to separate the header, footer, and main content into different parts.

You want to share logic and layout between similar UI elements.

Syntax

Vue

<script setup>
// Define your component logic here
</script>

<template>
  <!-- Your HTML structure here -->
</template>

<style scoped>
/* Your component styles here */
</style>

Use <script setup> for a simple and clean way to write component logic in Vue 3.4+.

The scoped attribute in <style> makes styles apply only to this component.

Examples

A simple component showing a message using a variable.

Vue

<script setup>
const message = 'Hello from component!'
</script>

<template>
  <p>{{ message }}</p>
</template>

A button component that counts how many times it is clicked.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

A component that accepts a title prop to display a heading.

Vue

<script setup>
const props = defineProps({
  title: String
})
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Sample Program

This component shows a button that counts how many times you click it. It uses ref to keep track of the count. The button has an accessible label and changes color when hovered or focused. The styles are scoped so they only affect this component.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <section>
    <h2>Counter Component</h2>
    <button @click="increment" aria-label="Increment counter">
      Clicked {{ count }} times
    </button>
  </section>
</template>

<style scoped>
section {
  padding: 1rem;
  border: 2px solid #4a90e2;
  border-radius: 0.5rem;
  max-width: 200px;
  text-align: center;
  font-family: Arial, sans-serif;
}
button {
  background-color: #4a90e2;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
button:hover, button:focus {
  background-color: #357ABD;
  outline: none;
}
</style>

Important Notes

Always use ref or reactive to make data reactive in Vue components.

Use @click to listen for user clicks on buttons or other elements.

Scoped styles help keep your component styles from affecting other parts of the page.

Summary

Components are reusable building blocks for your Vue app.

Use <script setup> and <template> to define component logic and layout.

Props let you pass data into components, and reactive variables track changing data.