Summary  
This chapter covers defining reusable UI components as separate files and importing them into other components to compose a modular interface.  

General domain of usage  
Frontend user interface development

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

Create a new component file inside the `components` folder.

```vue 

<template>
  <p>Hello from component</p>
</template>
```

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

```vue 
<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.

Which step is required to use a custom component like `Greeting` in your `App.vue` file?

Learn how to build dynamic interfaces using Vue.js and modern JavaScript patterns. Render data, handle user interactions, structure components, and manage state in a clear and scalable way. Apply core Vue concepts to create a complete application with reactive data, reusable components, and interactive UI.

Creating and Using Components