What is Vue.js?

Welcome to the NOVA LAB Launch Zone! I'm Dr. Nova and I'll be your mentor. This is where we initialize all systems that will fly to Mars. Vue.js is the framework that powers our mission interfaces - from control panels to life support systems.

Picture a life support panel built without any framework. The oxygen level changes every few seconds, and every new reading has to be written by hand into the right place on the page:

1// Without a framework: every reading means a manual screen update
2const oxygenDisplay = document.querySelector('#oxygen')
3oxygenDisplay.textContent = '98.5%'

This code works, but only once. With the next reading you have to find the element again and replace its text again - and do that for every indicator, because the number in the code and the label on the screen are not connected in any way. Vue turns this around: you describe what the screen should show for the mission data, and the framework makes sure the picture always matches it.

What you will learn

• what Vue.js is and why we call it a progressive framework,
• what the simplest component with ref() and {{ }} mustaches looks like,
• what the three NOVA LAB protocols are built on,
• what Vue 3 brought and which tools make up the mission ecosystem.

Vue.js - The Space Mission Framework

Vue.js (pronounced /vjuː/, like the English word "view") is a progressive JavaScript framework for building user interfaces. It was created by Evan You, and its first version came out in 2014. In 2087 it's still in use because it has proven itself in the most extreme conditions - in space.

Why "progressive"?

Vue can be adopted incrementally - from a simple interface to an advanced ship control system. It's like building a rocket:

• First a prototype (basic Vue)
• Then a full rocket (components, routing)
• Finally an interplanetary vessel (full application)

You can add Vue to an existing page with a single script, or build a whole application with it using the Vite tool. At NOVA LAB we work with the full setup of Vite and .vue files from day one - that's how real projects are built, and that's the start I recommend.

NOVA LAB Protocols

Our coding principles are built on three pillars:

1. Simplicity (KISS Protocol)

The simplest component has two parts. The template in the <template> tag describes what appears on the screen, and the <script setup> section holds the data. We bring in the ref function with an import statement from the vue package and pass it a starting value:

1<template>
2  <h1>{{ missionName }}</h1>
3</template>
4
5<script setup>
6import { ref } from 'vue'
7const missionName = ref('MARS ONE')
8</script>

The ref() function creates a reactive container: Vue watches its contents and knows when they change. The double curly braces, called mustaches, insert the container's current value into the template. The <h1> tag is still plain HTML - Vue only added a slot for the data. When the mission name changes, the heading updates by itself, with no code hunting for the element on the page.

You can have as many containers as you like, and mustaches can be woven into ordinary text, so any label can stand before or after them:

1<template>
2  <h2>{{ stationName }}</h2>
3  <p>Crew: {{ crewCount }} people</p>
4  <p>Oxygen reserve: {{ oxygenReserve }}%</p>
5</template>
6
7<script setup>
8import { ref } from 'vue'
9
10const stationName = ref('Nova Base')
11const crewCount = ref(4)
12const oxygenReserve = ref(92)
13</script>

Each value got its own ref(), and a single import served all three. The labels "Crew:" and "%" stayed plain text - Vue replaces only what sits inside the mustaches. We'll take both tools apart in the lesson on your first Vue system.

2. Reliability (ZERO-FAULT Protocol)

Vue code is predictable - critical for life support systems. The template declares how the screen should look for a given state, and you change only the data, never the page directly.

3. Performance (LIGHT Protocol)

Vue uses Virtual DOM - every kilobyte less means more fuel on board. After a data change, Vue builds a lightweight description of the screen in memory, compares it with the previous one and applies only the differences to the page, while the compiler marks the parts that never change so they can be skipped.

Vue 3 - The Space Generation

Vue 3 came out in 2020 and it's the version we use at NOVA LAB - Vue 2 reached the end of its support at the end of 2023. Vue 3 introduced changes crucial for space missions:

• Composition API - modular system organization
• Better performance - smaller bundle, faster responses
• TypeScript - typing eliminates bugs before launch
• Teleport, Suspense - advanced UI techniques

The Composition API is the style you just saw: you write data and functions in <script setup>. The older Options API still works, but we don't use it. Teleport moves a piece of the template to another place on the page, and Suspense shows a waiting screen for data - the Vue documentation still marks it as experimental.

NOVA LAB Ecosystem

Vue Router and Pinia are official libraries of the Vue team. Pinia manages state shared by the whole application - in the Vue world you don't reach for Redux or the Context API known from React. Vite was written by the same author as Vue, and in the next lesson you'll start this engine.

In the editor below, a panel with an energy counter is waiting for you. Click plus and minus, watch the status change, and find the mustaches and ref() in the code.

Remember: Vue is a progressive framework in which you describe what the screen should show, and the system itself makes sure the picture always matches the mission data.

1<template>
2  <div class="nova-lab">
3    <header class="lab-header">
4      <h1>NOVA LAB - Launch Zone</h1>
5      <p class="subtitle">Year 2087 - Mars Mission Research Center</p>
6    </header>
7
8    <main class="lab-content">
9      <section class="welcome-panel">
10        <h2>Welcome, Engineer!</h2>
11        <p>
12          This is your first Vue.js component in NOVA LAB.
13          We created it using Vite - a lightning-fast build tool.
14        </p>
15        <p>
16          <strong>Dr. Nova:</strong> "Every great system starts with a small component.
17          Your journey to Mars has just begun!"
18        </p>
19      </section>
20
21      <section class="info-panel">
22        <h3>What is Vue.js?</h3>
23        <ul>
24          <li>Progressive JavaScript framework</li>
25          <li>Reactive data system</li>
26          <li>Reusable components</li>
27          <li>Great developer tools</li>
28        </ul>
29      </section>
30
31      <section class="counter-demo">
32        <h3>Interactive Energy Counter</h3>
33        <div class="counter">
34          <button @click="powerLevel--" class="btn">-</button>
35          <span class="power-display">{{ powerLevel }}%</span>
36          <button @click="powerLevel++" class="btn">+</button>
37        </div>
38        <p class="status" :class="powerStatus">
39          Status: {{ powerStatusText }}
40        </p>
41      </section>
42    </main>
43
44    <footer class="lab-footer">
45      <p>NOVA LAB © 2087 - Preparing for Mars Colonization</p>
46    </footer>
47  </div>
48</template>
49
50<script setup>
51import { ref, computed } from 'vue'
52
53const powerLevel = ref(50)
54
55const powerStatus = computed(() => {
56  if (powerLevel.value < 20) return 'critical'
57  if (powerLevel.value < 50) return 'warning'
58  return 'nominal'
59})
60
61const powerStatusText = computed(() => {
62  if (powerLevel.value < 20) return 'CRITICAL'
63  if (powerLevel.value < 50) return 'WARNING'
64  return 'NOMINAL'
65})
66</script>
67
68<style>
69.nova-lab {
70  min-height: 100vh;
71  background: linear-gradient(135deg, #0a0e27 0%, #1a1e37 100%);
72  color: #e0e0e0;
73  font-family: 'Segoe UI', system-ui, sans-serif;
74  padding: 2rem;
75}
76
77.lab-header {
78  text-align: center;
79  margin-bottom: 2rem;
80  padding-bottom: 1rem;
81  border-bottom: 2px solid #00ff88;
82}
83
84.lab-header h1 {
85  color: #00ff88;
86  font-size: 2.5rem;
87  margin: 0;
88  text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
89}
90
91.subtitle {
92  color: #00b4d8;
93  margin-top: 0.5rem;
94}
95
96.lab-content {
97  max-width: 800px;
98  margin: 0 auto;
99}
100
101section {
102  background: rgba(26, 30, 55, 0.8);
103  border: 1px solid #00b4d8;
104  border-radius: 12px;
105  padding: 1.5rem;
106  margin-bottom: 1.5rem;
107}
108
109h2, h3 {
110  color: #00ff88;
111  margin-top: 0;
112}
113
114ul {
115  list-style: none;
116  padding: 0;
117}
118
119ul li {
120  padding: 0.5rem 0;
121  border-bottom: 1px solid rgba(0, 180, 216, 0.3);
122}
123
124ul li::before {
125  content: "→ ";
126  color: #00ff88;
127}
128
129.counter {
130  display: flex;
131  align-items: center;
132  justify-content: center;
133  gap: 1rem;
134  margin: 1rem 0;
135}
136
137.btn {
138  background: #00b4d8;
139  color: #0a0e27;
140  border: none;
141  width: 50px;
142  height: 50px;
143  border-radius: 50%;
144  font-size: 1.5rem;
145  cursor: pointer;
146  transition: all 0.3s;
147}
148
149.btn:hover {
150  background: #00ff88;
151  transform: scale(1.1);
152}
153
154.power-display {
155  font-size: 2rem;
156  font-weight: bold;
157  color: #00ff88;
158  min-width: 100px;
159  text-align: center;
160}
161
162.status {
163  text-align: center;
164  padding: 0.5rem;
165  border-radius: 8px;
166  font-weight: bold;
167}
168
169.status.nominal { background: rgba(0, 255, 136, 0.2); color: #00ff88; }
170.status.warning { background: rgba(255, 170, 0, 0.2); color: #ffaa00; }
171.status.critical { background: rgba(255, 68, 68, 0.2); color: #ff4444; }
172
173.lab-footer {
174  text-align: center;
175  margin-top: 2rem;
176  color: #666;
177  font-size: 0.9rem;
178}
179</style>