File Structure

For advanced apps we recommend a domain-driven file structure using multiple pages/ directories, while for basic apps we recommend using a single pages/ directory.

Basic Apps

# Landing page
/pages/index/**/* # More files specific to the landing page
# About page
/pages/about/**/* # More files specific to the about page
# Other pages
# Error page
# Components shared by several pages
# Server code (Express.js/Fastify/...)


# Marketing pages
/marketing/pages/index/+Page.js # URL: /
/marketing/pages/about/+Page.js # URL: /about
/marketing/pages/jobs/+Page.js # URL: /jobs
/marketing/+config.js # Configures the URL of the pages aboves, see below
# Auth related code & pages
# All code related to products
# Components shared accross domains
# Server code (Express.js/Fastify/...)
// /marketing/+config.js
// Route to /* instead of /marketing/*
export default {
  filesystemRoutingRoot: '/'

See API > filesystemRoutingRoot.

// /products/pages/product/+route.js
export default '/product/@id'

Resulting route table:

PROJECT FILES                               ROUTE
================================            ============
/marketing/pages/index/+Page.js             /
/marketing/pages/about/+Page.js             /about
/marketing/pages/jobs/+Page.js              /jobs

/auth/pages/signup/+Page.js                 /auth/signup
/auth/pages/login/+Page.js                  /auth/login

/products/pages/index/+Page.js              /products
/products/pages/product/+Page.js            /product/@id

Such domain-driven file structure is also convenient for setting different default configurations.

# Defaults
# Pages
# Defaults
# Pages

Note how config inheritance applies:

  • The /marketing/pages/+*.js files apply as default to all pages living at /marketing/pages/**.
  • The /admin-panel/pages/+*.js files apply as default to all pages living at /admin-panel/pages/**.



You can embed pages/ in src/:

/src/pages/index/+Page.js # => URL /
/src/pages/about/+Page.js # => URL /about

See Routing > Filesystem Routing for more information.

Without Vike extensions

In case you don't use a UI framework Vike extension (vike-react/vike-vue/vike-solid), we recommend placing your UI framework integration code in a renderer/ directory.

# Same as above
# Code that specifies how pages are rendered
/renderer/PageShell.{jsx,vue}  # React/Vue/... component that wraps the `Page` component
/renderer/Header.{jsx,vue} # Website header used for every page
/renderer/Footer.{jsx,vue} # Website footer used for every page
/renderer/logo.svg # Website logo (favicon and used by <Header>)

The hooks /renderer/+onRender{Html,Client}.js apply as default to all pages /pages/**/+Page.js.

The renderer/ directory doesn't add any functionality: defining the hooks +onRender{Html,Client}.js at /renderer/ is equivalent to defining them at /pages/ or /. It's just an optional convenience for moving rendering logic outside of pages/: in order to avoid cluttering the pages/ directory and to organize and put all rendering code in one place.

See also