Vuloom logoVuloom

Introduction

Vuloom is a full-stack Vue framework built around a small set of conventions:

  • app/ owns your document shell, page routes, middleware, and app-level data.
  • server/routes/ owns raw HTTP handlers such as APIs, webhooks, and text responses.
  • vuloom.config.ts owns project-level configuration.
  • vuloom prepare generates .vuloom/types/ so route ids, params, and middleware names stay typed.

Vuloom is designed for teams that want file-based routing and SSR without losing direct control over Vue, Vite, and request handling.

What Vuloom includes

  • Document-level hydration with app/app.vue.
  • File-based page routing under app/pages/.
  • Route loader and action files.
  • Client navigation loading boundaries with loading.*.
  • Raw server handlers with server/routes/**/*.ts.
  • Typed navigation targets such as { routeId, params }.
  • App-level and route-level middleware with explicit ordering.

The default workflow

Create a project.

Run vuloom prepare to generate local route and middleware types.

Run vuloom dev during development.

Run vuloom build for production output.

Run vuloom start to serve the built app.

Project shape

├── app/
│   ├── app.vue
│   ├── app.config.ts
│   ├── loader.ts
│   ├── error.vue
│   ├── middleware/
│   ├── pages/
├── server/
│   ├── middleware/
│   ├── routes/
├── public/
├── vuloom.config.ts

The rest of this section walks through that structure from first boot to first production build.

Installation