# 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

<steps level="4">

#### 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.

</steps>

## Project shape

```text
├── 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.