Structure

How a scaffolded Aero project is laid out: client, content, public, optional server, and config files.

Minimal template

When you run pnpm dlx vp create @aero-js:minimal --directory my-app --no-interactive, Aero scaffolds a minimal tree. Use @aero-js:fullstack for Nitro under server/ and a root nitro.config.ts. See Installation.

/your-project

client

assets

scripts

styles

images

components

layouts

pages

content

site.ts

public

vite.config.ts

tsconfig.json

package.json

Fullstack template

Adds server output and Nitro configuration:

server

api

nitro.config.ts

Directory overview

Directory	Purpose
client/pages/	File-based routing — each .html file becomes a URL. See Routing.
client/layouts/	Shared page shells with <slot />. See Templates.
client/components/	Reusable .html partials. See Templates.
client/assets/styles/	CSS files, referenced via @styles/ alias. See Styling.
client/assets/scripts/	Client-side TS/JS, referenced via @scripts/ alias. See Scripts.
content/	Data modules and content collections. See Content.
public/	Static files copied to dist/ unchanged (favicons, robots.txt). See Assets.
server/	Nitro API handlers (fullstack only). See Server.

Config files

File	Purpose
vite.config.ts	Vite config with the aero() plugin
aero.config.ts	Optional dedicated Aero config via defineConfig()
tsconfig.json	TypeScript settings and path aliases
nitro.config.ts	Nitro config (fullstack only)
content.config.ts	Content collection schemas (when using @aero-js/content)

If you rename top-level folders (for example frontend/ instead of client/), set dirs in your Aero config. See Configuration.