Single File Components - System Modules

At NOVA LAB, every ship module is a self-contained unit - it has its own power supply, logic, and housing. Similarly, a Vue Single File Component combines template, script, and style in a single file.

Anatomy of a .vue Module

1<template>
2  <!-- INTERFACE - what the astronaut sees -->
3  <div class="life-support-panel">
4    <h1>{{ systemName }}</h1>
5    <p>Oxygen level: {{ oxygenLevel }}%</p>
6    <div class="status" :class="statusClass">{{ status }}</div>
7  </div>
8</template>
9
10<script setup>
11// LOGIC - how the system works
12import { ref, computed } from 'vue'
13
14const systemName = ref('Life Support System')
15const oxygenLevel = ref(98.5)
16
17const status = computed(() =>
18  oxygenLevel.value > 90 ? 'OPTIMAL' : 'WARNING'
19)
20
21const statusClass = computed(() =>
22  oxygenLevel.value > 90 ? 'status-ok' : 'status-warning'
23)
24</script>
25
26<style scoped>
27/* APPEARANCE - how the panel looks */
28.life-support-panel {
29  background: #0a1628;
30  border: 2px solid #00ff88;
31  border-radius: 8px;
32  padding: 1.5rem;
33  color: #e0e0e0;
34}
35
36.status-ok { color: #00ff88; }
37.status-warning { color: #ffaa00; }
38</style>

Three Module Sections

1.

<template>

- User Interface

• Defines what the astronaut sees
• Uses Vue syntax (directives, interpolation)
• Must be clear - in a crisis there's no time to search

2.

<script setup>

- System Logic

• Modern Composition API syntax
• Automatic variable export
• Reactivity with Vue

3.

<style scoped>

- Panel Appearance

• CSS specific to the module

• scoped

  isolates styles - one module doesn't break another
• Dark background, bright accents - space standard

<script setup>

vs Old Syntax

1<!-- NEW PROTOCOL (recommended) -->
2<script setup>
3import { ref } from 'vue'
4const pressure = ref(101.3)
5</script>
6
7<!-- OLD PROTOCOL (legacy) -->
8<script>
9import { ref } from 'vue'
10export default {
11  setup() {
12    const pressure = ref(101.3)
13    return { pressure }
14  }
15}
16</script>

At NOVA LAB we exclusively use the new protocol - it's shorter and safer.