Filesystem Routing
Detailed information about Vike's Filesystem Routing.
For a quick overview see Guides > Routing > Filesystem Routing instead.
Ignored directories
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
Note that, except of pages/
and renderer/
, these directories aren't ignored by config inheritance:
pages/index/+config.js
# The +config.js above doesn't apply to pages/about/
pages/about/+Page.js
# This +config.js file applies to admin-panel/**/*
admin-panel/pages/+config.js
# This +config.js file applies to (marketing)/**/*
(marketing)/page/+config.js
See also: Guides > Routing > Groups
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
See also:
Case sensitive
Filesystem Routing is case sensitive:
FILESYSTEM URL
======================== ======
pages/HELLO/+Page.js /HELLO
Crawl
Vike crawls:
- Files inside Vite's
root
directory.Consequently, all your
+
files must live insideroot
. To make a directory or file outside ofroot
crawlable, use a symlink (e.g.$ ln -s
) and setVIKE_CRAWL="{git:false}"
. - Skips built-in ignore patterns such as
node_modules/
andejected/
.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>)
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.