Components - Base Building Modules

Welcome to the NOVA LAB 3D Printer Bay! Dr. Nova says: just as the 3D printer creates modular parts of the Martian habitat, you'll learn to create Vue components - reusable application elements.

What is a Component?

A component is a reusable, self-contained UI unit with its own template, logic, and styles - like a habitat module that can be connected with others.

1<!-- ModuleCard.vue -->
2<template>
3  <article class="module-card" style="background: #0a0e27; border: 1px solid #00b4d8; color: #00ff88;">
4    <div class="module-icon">🏗️</div>
5    <h3>{{ moduleName }}</h3>
6    <p>{{ moduleType }}</p>
7    <p class="status">{{ status }}</p>
8  </article>
9</template>
10
11<script setup>
12import { ref } from 'vue'
13
14const moduleName = ref('Oxygen Generator Alpha')
15const moduleType = ref('Life Support')
16const status = ref('ACTIVE')
17</script>
18
19<style scoped>
20.module-card {
21  border-radius: 8px;
22  padding: 1rem;
23  max-width: 300px;
24}
25
26.module-icon {
27  font-size: 3rem;
28  text-align: center;
29}
30
31.status {
32  color: #00ff88;
33  font-weight: bold;
34}
35</style>

Using a Component

1<!-- App.vue -->
2<template>
3  <div class="production-bay" style="background: #0a0e27;">
4    <ModuleCard />
5    <ModuleCard />
6    <ModuleCard />
7  </div>
8</template>
9
10<script setup>
11import ModuleCard from './components/ModuleCard.vue'
12</script>

Component Naming

1<script setup>
2// PascalCase - recommended
3import ArtworkCard from './ArtworkCard.vue'
4import UserProfile from './UserProfile.vue'
5import NavigationMenu from './NavigationMenu.vue'
6
7// In template - PascalCase or kebab-case
8</script>
9
10<template>
11  <!-- PascalCase -->
12  <ArtworkCard />
13  <UserProfile />
14
15  <!-- or kebab-case -->
16  <artwork-card />
17  <user-profile />
18</template>

File Organization

1src/
2├── components/
3│   ├── common/
4│   │   ├── BaseButton.vue
5│   │   ├── BasePanelCard.vue
6│   │   └── BaseInput.vue
7│   ├── modules/
8│   │   ├── ModuleCard.vue
9│   │   ├── ModuleList.vue
10│   │   └── ModuleDetail.vue
11│   └── layout/
12│       ├── MissionHeader.vue
13│       ├── ControlFooter.vue
14│       └── NavSidebar.vue