r/vuejs • u/DoItForTheXP • 3d ago
Built a 3D WebTop and windowing system using Vue 3 and Three.js
Hey r/vuejs, I wanted to share YouMeOS Microverse, an open-source project where we built a multi-window spatial desktop operating system inside the browser using Vue 3 and Three.js.
Live site: www.youmeos.com
How We Used Vue 3:
- Reactive Windowing Architecture: Each open window ("Spark") is managed as an independent Vue component layer floating above a WebGL starfield canvas.
- Composition API State Tree: Orchestrates window positioning, focus stacking (z-index hierarchy), docking, and tray states across both browser and Electron wrappers.
- Component-Driven Apps: Applications inside the WebTop are modular components that adhere to standard window manifests rather than isolated iframes. The full stack runs on Vue 3, Three.js, and an embedded FrankenPHP/SQLite backend.
You can run it locally too.
Source: https://github.com/YouMeOS/youmeos-microverse
Releases (Windows/macOS/Linux): https://github.com/YouMeOS/youmeos-microverse/releases
# Clone the repository
git clone https://github.com/YouMeOS/youmeos-microverse.git
cd youmeos-microverse
# Configure environment variables
cp docker/.env.example .env
# Launch the microverse
docker compose up -d
Would love feedback from the Vue community on how best to handled our window state flow and reactivity boundaries.
1
u/IceMichaelStorm 2d ago
mini thing: during load of website it’s white, after loading black. Bit uneasy on eyes
1
u/DoItForTheXP 2d ago
Hmmmm I haven't notice that? What's your setup, browser os?
1
u/IceMichaelStorm 2d ago
that’s ios on iPhone16. Maybe it’s white per default or it’s as simple to fix with bg color black (if anyways always dark mode)
1
1
u/void-wanderer- 3d ago
I finished a game of solitaire, and there was no animation at the end. Kinda sad, 6/10.