Your First Vue System

Time to build your first system! We'll start with a simple mission status panel.

Mission Status Panel

1<template>
2  <div class="mission-status">
3    <header>
4      <h1>🚀 {{ missionName }}</h1>
5      <span class="phase">{{ currentPhase }}</span>
6    </header>
7
8    <div class="metrics">
9      <div class="metric">
10        <label>Distance to Mars</label>
11        <span>{{ distanceToMars }} M km</span>
12      </div>
13      <div class="metric">
14        <label>Time to target</label>
15        <span>{{ daysRemaining }} days</span>
16      </div>
17      <div class="metric">
18        <label>Systems status</label>
19        <span :class="systemsOk ? 'ok' : 'warning'">
20          {{ systemsOk ? '✅ ALL OK' : '⚠️ CHECK SYSTEMS' }}
21        </span>
22      </div>
23    </div>
24
25    <button @click="nextPhase" class="phase-btn">
26      Next mission phase
27    </button>
28  </div>
29</template>
30
31<script setup>
32import { ref } from 'vue'
33
34const missionName = ref('MARS ONE - First Colony')
35const distanceToMars = ref(225)
36const daysRemaining = ref(180)
37const systemsOk = ref(true)
38
39const phases = ['Preparation', 'Launch', 'Flight', 'Mars Orbit', 'Landing']
40const phaseIndex = ref(0)
41const currentPhase = ref(phases[0])
42
43function nextPhase() {
44  phaseIndex.value = (phaseIndex.value + 1) % phases.length
45  currentPhase.value = phases[phaseIndex.value]
46
47  // Simulate mission progress
48  if (phaseIndex.value > 0) {
49    distanceToMars.value = Math.max(0, distanceToMars.value - 45)
50    daysRemaining.value = Math.max(0, daysRemaining.value - 36)
51  }
52}
53</script>
54
55<style scoped>
56.mission-status {
57  background: linear-gradient(180deg, #0d1b2a 0%, #1b263b 100%);
58  border: 1px solid #415a77;
59  border-radius: 12px;
60  padding: 2rem;
61  color: #e0e1dd;
62  font-family: 'Segoe UI', system-ui, sans-serif;
63}
64
65header {
66  display: flex;
67  justify-content: space-between;
68  align-items: center;
69  margin-bottom: 1.5rem;
70}
71
72.phase {
73  background: #00b4d8;
74  padding: 0.5rem 1rem;
75  border-radius: 20px;
76  font-size: 0.9rem;
77}
78
79.metrics {
80  display: grid;
81  grid-template-columns: repeat(3, 1fr);
82  gap: 1rem;
83  margin-bottom: 1.5rem;
84}
85
86.metric {
87  background: rgba(255,255,255,0.05);
88  padding: 1rem;
89  border-radius: 8px;
90  text-align: center;
91}
92
93.metric label {
94  display: block;
95  font-size: 0.8rem;
96  color: #778da9;
97  margin-bottom: 0.5rem;
98}
99
100.ok { color: #00ff88; }
101.warning { color: #ffd60a; }
102
103.phase-btn {
104  width: 100%;
105  padding: 1rem;
106  background: #00b4d8;
107  border: none;
108  border-radius: 8px;
109  color: white;
110  font-size: 1rem;
111  cursor: pointer;
112  transition: background 0.3s;
113}
114
115.phase-btn:hover {
116  background: #0096c7;
117}
118</style>

Key Elements

Interpolation

{{ }}

1<h1>{{ missionName }}</h1>

ref() - Reactive Variable

1const daysRemaining = ref(180)

@click - Event Handling

1<button @click="nextPhase">Next</button>

:class - Dynamic Classes

1<span :class="systemsOk ? 'ok' : 'warning'">