Filesystem Routing

Detailed information about Vike's Filesystem Routing.

For a quick overview see Guides > Routing > Filesystem Routing instead.

Ignored directories

Filesystem Routing

Following directories are ignored by Filesystem Routing:

src/
index/
pages/
(someDir)/ (any directory inside parentheses)
renderer/

FILESYSTEM                                                    URL
========================================================      ========
pages/index/+Page.js                                          /
src/(marketing)/pages/jobs/+Page.js                           /jobs
pages/pages/src/(some-dir)/about/renderer/index/+Page.js      /about

FILESYSTEM                                                    URL
========================================================      ========
pages/index/+Page.ts                                          /
src/(marketing)/pages/jobs/+Page.ts                           /jobs
pages/pages/src/(some-dir)/about/renderer/index/+Page.ts      /about

Config Inheritance

Note that, except for pages/ and renderer/, the directories above aren't ignored by config inheritance:

pages/index/+config.js
# The +config.js above doesn't apply to pages/about/
pages/about/+Page.js

pages/index/+config.ts
# The +config.ts above doesn't apply to pages/about/
pages/about/+Page.ts

# This +config.js file applies to pages/admin-panel/**/*
pages/admin-panel/+config.js
# This +config.js file applies to pages/(marketing)/**/*
pages/(marketing)/+config.js

# This +config.ts file applies to pages/admin-panel/**/*
pages/admin-panel/+config.ts
# This +config.ts file applies to pages/(marketing)/**/*
pages/(marketing)/+config.ts

Unlike the other ignored directories, the pages/ and renderer/ directories are also ignored by config inheritance:

###################
## Configuration ##
###################
# This +config.js file applies everywhere (i.e. /**/* — including the root directory)
pages/+config.js
# This +onRenderClient.js hook applies everywhere (i.e. /**/* — including the root directory)
renderer/+onRenderClient.js
# This +onRenderHtml.js hook applies only to admin-panel/**/*
admin-panel/renderer/+onRenderHtml.js
# This +onRenderHtml.js hook applies only to (marketing)/**/*
(marketing)/pages/+onRenderHtml.js
 
###################
###### Pages ######
###################
# This page is configured by:
# - pages/+config.js
# - renderer/+onRenderClient.js
# - (marketing)/pages/+onRenderHtml.js
(marketing)/pages/index/+Page.js
# This page is configured by:
# - pages/+config.js
# - renderer/+onRenderClient.js
# - admin-panel/renderer/+onRenderHtml.js
admin-panel/pages/index/+Page.js

###################
## Configuration ##
###################
# This +config.ts file applies everywhere (i.e. /**/* — including the root directory)
pages/+config.ts
# This +onRenderClient.ts hook applies everywhere (i.e. /**/* — including the root directory)
renderer/+onRenderClient.ts
# This +onRenderHtml.ts hook applies only to admin-panel/**/*
admin-panel/renderer/+onRenderHtml.ts
# This +onRenderHtml.ts hook applies only to (marketing)/**/*
(marketing)/pages/+onRenderHtml.ts
 
###################
###### Pages ######
###################
# This page is configured by:
# - pages/+config.ts
# - renderer/+onRenderClient.ts
# - (marketing)/pages/+onRenderHtml.ts
(marketing)/pages/index/+Page.ts
# This page is configured by:
# - pages/+config.ts
# - renderer/+onRenderClient.ts
# - admin-panel/renderer/+onRenderHtml.ts
admin-panel/pages/index/+Page.ts

We call defining multiple pages/ directories a domain-driven file structure — note how (marketing)/pages/ and admin-panel/pages/ are defined instead of pages/(marketing)/ and pages/admin-panel/.

See also:

+onRenderHtml() hook

+onRenderClient() hook

Case sensitive

Filesystem Routing is case sensitive:

FILESYSTEM                     URL
========================       ======
pages/HELLO/+Page.js           /HELLO

FILESYSTEM                     URL
========================       ======
pages/HELLO/+Page.ts           /HELLO

Crawl

Vike crawls:

Files inside Vite's root directory.

Consequently, all your + files must live inside root. To make a directory or file outside of root crawlable, use a symlink (e.g. $ ln -s) and set VIKE_CRAWL="{git:false}".
Skips built-in ignore patterns such as node_modules/ and ejected/.

To add custom ignore patterns, see #2228.
Skips .gitignore files (if you use Git).

If you want to also crawl these then set VIKE_CRAWL="{git:false}".
Skips soft-symlinked ($ ln -s) directories (if you use Git).

If you want to also crawl these then set VIKE_CRAWL="{git:false}".

By default, if you use Git, Vike uses $ git ls-files to crawl your files. If you set VIKE_CRAWL="{git:false}" then Vike uses tinyglobby instead of Git.

# Use tinyglobby instead of Git to crawl files
$ VIKE_CRAWL="{git:false}" npm run dev

You can tell Vike to skip certain files and/or directories from being crawled, see #2228.

`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 inside a renderer/ directory.

# Usual Vike file structure
/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>)

# Usual Vike file structure
/pages/
/components/
/server/
 
# Code that specifies how pages are rendered
/renderer/+onRenderHtml.ts
/renderer/+onRenderClient.ts
/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.

We recommend defining a renderer/ directory only if you are implementing a custom UI framework (React/Vue/Solid/...) integration.