Minecraft ComputerCraft API – Frontend

Vue 3 + TypeScript single page application for the ME System Monitor backend. It shows the live contents of a Minecraft ME system over a websocket and renders per-item history charts.

Features

• Live view over a websocket (wss://…/api/ws/live) – updates in real time.
• Persistent filters – text search, sort column/order and mod filter are kept in localStorage and re-applied by the server on every update.
• Item history – clicking an item opens a detail page with a Chart.js line chart plus current / min / max / change statistics.
• Abbreviated numbers – 12000 → 12k, 43452542 → 43.45M. The full value is available as a tooltip.
• HTTPS / WSS by default via a self-signed certificate.

Tech stack

Concern	Choice
Framework	Vue 3 (<script setup>) + TypeScript
Build tool	Vite 6
Routing	vue-router 4
Charts	Chart.js 4
Dev TLS	@vitejs/plugin-basic-ssl
Production	nginx (HTTPS, self-signed cert)

Quick start (development)

npm install
cp .env.example .env   # adjust VITE_API_BASE / VITE_WS_BASE if needed
npm run dev

The dev server runs on https://localhost:5173 with a self-signed certificate. Your browser will warn about it once – accept the exception.

The backend also uses a self-signed certificate. Open https://localhost:3000/api/docs once and accept that certificate too, otherwise the browser blocks the API and websocket connections.

Build & preview

npm run build     # type-checks and builds into dist/
npm run preview   # serves the build on https://localhost:4173

Environment variables

Variable	Default	Description
VITE_API_BASE	https://localhost:3000	Backend HTTP API base URL
VITE_WS_BASE	derived from API base	Backend websocket base URL

VITE_* variables are inlined at build time.

Docker

docker build \
  --build-arg VITE_API_BASE=https://localhost:3000 \
  -t mc-cc-frontend .

docker run -p 8443:443 mc-cc-frontend

The container generates a self-signed certificate on first start and serves the SPA on port 443 (mapped to 8443 above) → https://localhost:8443.

Project structure

src/
  api/          config, shared types, HTTP client
  components/   FilterBar, ItemTable, HistoryChart
  composables/  useLiveData (websocket + filter state)
  router/       route definitions
  utils/        number / date formatting
  views/        LiveView, ItemHistoryView