Project: Mars Dashboard

Final project of the 3D Printer Bay! Build a complete NOVA LAB station dashboard with multiple components, lifecycles, and composables.

Module Summary

In this module you learned the fundamentals of building Vue.js applications from components - just as NOVA LAB station consists of modular habitat parts, your application consists of components:

• Components - creating self-contained, reusable UI elements with their own template (

  <template>

  ), logic (

  <script setup>

  ) and styles (

  <style>

  ). Each component is a separate

  .vue

  file with clearly defined responsibility
• Component import - local registration (import in a given component) and global registration (available throughout the app via

  app.component()

  ). In Composition API with

  <script setup>

  , imported components are automatically available in the template
• Composition - building complex interfaces from simple, smaller components. The parent-child pattern, passing data down and emitting events up the component tree
• Lifecycle hooks -

  onMounted

  (after DOM insertion),

  onUpdated

  (after update),

  onUnmounted

  (before removal),

  onBeforeMount

  ,

  onBeforeUpdate

  - allow executing code at key moments in a component's life
• Scoped styles - style isolation in components via the

  scoped

  attribute on the

  <style>

  tag. Styles are automatically limited to the given component and don't affect the rest of the application
• Composables - reusable functions (e.g.,

  useTimer

  ,

  useFetch

  ) that encapsulate reactive state and logic. Allow sharing logic between components without duplicating code

Project Requirements

Build a Mars Dashboard - the central control panel of NOVA LAB station, consisting of multiple cooperating components:

1. StatusBar Component

Display the overall station status: station name, current date and time (updated every second via a composable), energy level (progress bar), external temperature, and habitat pressure. Use

onMounted

for data initialization and

onUnmounted

for timer cleanup.

2. ModuleList Component

A list of habitat modules (e.g., Oxygen Generator, Water Recycler, Solar Panels, Communication Array) with the ability to toggle each module's status (ACTIVE/STANDBY/OFFLINE). Each module should be rendered as a separate ModuleCard component with appropriate status colors.

3. useTimer Composable

Create a

useTimer

composable that counts time since application start (mission uptime). Use

ref

for state,

onMounted

to start

setInterval

, and

onUnmounted

to clear the interval (

clearInterval

). The composable should return formatted time (HH:MM:SS).

4. Scoped styles

Each component should have its own isolated styles with the

scoped

attribute. Use a dark space theme (dark backgrounds, neon accent colors: green for ACTIVE, yellow for STANDBY, red for OFFLINE). Ensure responsiveness - the dashboard should work at different screen sizes.

Expand the starter below!