Project: NOVA LAB Storage System

Time to apply all the storage patterns in a single project! You'll build a complete cargo bay management system for NOVA LAB station that uses:

• Default and Named Slots - flexible cargo panel layout
• Scoped Slots - rendering the module list
• Dynamic Components - switching station views
• KeepAlive - preserving form state
• Teleport - critical alert modal

Architecture

1App
2  ├── StationDashboard (named slots: header, default, footer)
3  │     ├── #header → Navigation tabs
4  │     ├── #default → <component :is> + KeepAlive
5  │     │     ├── CargoList (scoped slot → item rendering)
6  │     │     ├── AddModule (form with local state)
7  │     │     └── StationLog (event log)
8  │     └── #footer → StatusBar
9  └── Teleport → AlertModal (critical modal in body)

Task

Analyze the code in the editor and understand how all the patterns work together:

1. StationDashboard - a component with named slots (header, default, footer) creating a layout
2. CargoList - a scoped slot allowing the parent to decide how to render each cargo module
3. Dynamic components -

   <component :is>

   switches between CargoList, AddModule, and StationLog
4. KeepAlive - preserves AddModule state after switching tabs
5. Teleport - AlertModal rendered in body, triggered from any panel

Key observations:

• Named slots in StationDashboard provide a flexible layout without a hardcoded structure
• Scoped slots in CargoList separate data logic from presentation
• KeepAlive prevents form data loss in AddModule
• Teleport ensures proper modal positioning