# Configuration

> 

Vuloom uses two configuration layers.

## `vuloom.config.ts`

This is the project-level config file. Use it for:

- dev host and port
- global server middleware
- Vite overrides
- route scanner options

```ts
import { defineConfig } from "vuloom/vite";

export default defineConfig({
  dev: {
    port: 3000
  },
  server: {
    middleware: ['server-trace']
  }
})
```

## `app/app.config.ts`

This is the app-level config file. Keep it small and static.

Use it for app-level middleware registration:

```ts
export default {
  middleware: ['request-meta']
};
```

## `app/loader.ts`

Do not put request-aware shell loading into `app.config.ts`. Use `app/loader.ts` instead.

```ts
export default async function loadAppData(request: Request) {
  return {
    origin: new URL(request.url).origin
  };
}
```