Functional components in Vue

Introduction

Functional components are simple Vue components without internal state or lifecycle hooks. They are faster and easier to write for small, reusable UI parts.

When you need a simple component that only receives props and renders UI.

For small UI pieces like icons, buttons, or labels that don't need to manage data.

When you want better performance by avoiding component overhead.

To keep your code clean and easy to understand for simple display logic.

Syntax

Vue

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps<{ message: string }>()
</script>

<template>
  <div>{{ message }}</div>
</template>

Functional components in Vue 3 use the <script setup> syntax for simplicity.

They do not have reactive state or lifecycle hooks like onMounted.

Examples

A functional button component that shows text from props.

Vue

<script setup lang="ts">
const props = defineProps<{ text: string }>()
</script>

<template>
  <button>{{ text }}</button>
</template>

A simple display component showing a number passed as a prop.

Vue

<script setup lang="ts">
const props = defineProps<{ count: number }>()
</script>

<template>
  <span>Count: {{ count }}</span>
</template>

Sample Program

This functional component renders a button with a label from props. It uses an accessible aria-label for screen readers.

Vue

<script setup lang="ts">
const props = defineProps<{ label: string }>()
</script>

<template>
  <button :aria-label="label">{{ label }}</button>
</template>

Important Notes

Functional components do not have reactive state or lifecycle hooks.

They are best for simple UI parts that only depend on props.

Use <script setup> for concise syntax.

Summary

Functional components are simple, stateless Vue components.

They improve performance for small reusable UI parts.

Use them when you only need to display props without extra logic.