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 /aboutFILESYSTEM URL
======================================================== ========
pages/index/+Page.ts /
src/(marketing)/pages/jobs/+Page.ts /jobs
pages/pages/src/(some-dir)/about/renderer/index/+Page.ts /aboutConfig 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.jspages/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.tsUnlike 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.tsWe call defining multiple
pages/directories a domain-driven file structure — note how(marketing)/pages/andadmin-panel/pages/are defined instead ofpages/(marketing)/andpages/admin-panel/.
See also:
Case sensitive
Filesystem Routing is case sensitive:
FILESYSTEM URL
======================== ======
pages/HELLO/+Page.js /HELLOFILESYSTEM URL
======================== ======
pages/HELLO/+Page.ts /HELLOCrawl
Vike crawls:
- Files inside Vite's
rootdirectory.Consequently, all your
+files must live insideroot. To make a directory or file outside ofrootcrawlable, 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
.gitignorefiles (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 devYou 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.