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 across 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 Files > 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