File Structure

For advanced apps we recommend a domain-driven file structure using multiple pages/ directories.

For basic apps we recommend using a single pages/ directory.

Basic

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

Domain-driven

You can have what we call a domain-driven file structure.

# ===========================
# ======= Marketing =========
# ===========================
# Pages
(marketing)/pages/index/+Page.js      # URL: /
(marketing)/pages/about/+Page.js      # URL: /about
# Configs
(marketing)/pages/+Layout.js
(marketing)/pages/+prerender.js
# Components
(marketing)/components/ContactUs.js
 
# ===========================
# ===== Authentication ======
# ===========================
# Pages
auth/pages/signup/+Page.js            # URL: /auth/signup
auth/pages/login/+Page.js             # URL: /auth/login
# Configs
auth/pages/+Layout.js
# Components
auth/components/UserInfo.js
# Database
auth/database/fetchUser.js
 
# ===========================
# ===== Product pages =======
# ===========================
# Pages
products/pages/index/+Page.js         # URL: /products
products/pages/product/+Page.js       # URL: /product/@id
products/pages/product/+route.js
# Configs
products/pages/+Layout.js
products/pages/+ssr.js
# Database
products/database/fetchProduct.js
products/database/fetchProductList.js
 
# Shared accross all domains
components/
server/
// /products/pages/product/+route.js
 
export default '/product/@id'

The directory (marketing)/ is used for grouping and is ignored by Filesystem Routing.

Alternatively, you can have marketing/ (without parentheses) and set marketing/+filesystemRoutingRoot.js to change the Filesystem Routing URL from /marketing to /.

See API > Config > Inheritance.

Example: /examples/file-structure-domain-driven/.

src/pages/

You can embed pages/ in src/:

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

renderer/

If you don't use a UI framework Vike extension vike-react/vike-vue/vike-solid then we recommend placing your UI framework integration in a renderer/ directory.

# Same as above
/pages/
/components/
/server/
 
# Code that specifies how pages are rendered
/renderer/+onRenderHtml.js
/renderer/+onRenderClient.js
/renderer/Layout.{jsx,vue}  # React/Vue/... component that wraps the `Page` component
/renderer/Layout.css
/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