Creating and Using Components

In Vue, components are created as separate .vue files and then used inside other components.

Create a new component file inside the components folder.

<!-- Message.vue -->
<template>
  <p>Hello from component</p>
</template>

To use this component, import it and add it to your template.

<script setup>
import Message from "./components/Message.vue";
</script>

<template>
  <Message />
</template>

The imported component works like a custom HTML element.

You can create multiple components and combine them to build the full interface.

This approach helps organize your application into smaller, reusable parts.