Search
Docs Menu
API
Get Started
Edit this page

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:

  • index/
  • pages/
  • src/
  • (someDir)/ (any directory inside parentheses)
FILESYSTEM                                                     URL
=========================================================      ========
pages/index/+Page.js                                           /
(marketing)/src/pages/jobs/+Page.js                            /jobs
(some)/(path)/src/pages/jobs/+Page.js                          /jobs
contact/+Page.js                                               /contact
pages/pages/src/(some-dir)/src/index/pages/about/+Page.js      /about

But they aren't ignored by config inheritance:

pages/about/+Page.js
# This +config.js file doesn't apply to pages/about/+Page.js
src/pages/+config.js

Case sensitive

Filesystem Routing is case sensitive:

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

Crawl space

Vike crawls:

  • Files inside Vite's root directory.

    Consequently, all your + files need to live inside root. To make a directory outside of root crawlable, you can use a symlink (e.g. $ ln -s) and set VIKE_CRAWL="{git:false}".

  • Skips node_modules/
  • 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 Vike uses Git (if your repository uses Git) to crawl your files. If you set VIKE_CRAWL="{git:false}" then Vike uses tinyglobby instead.

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

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.

# 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.

The renderer/ directory isn't like the list of ignored directories because not only is it ignored by Filesystem Routing but it's also ignored by config inheritance.

⚠️

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

See also