🔍Search
📚 Docs Menu
🌱 Get Started

Filesystem Routing

Detailed information about Vike's Filesystem Routing.

For an overview, see instead: Guides > Routing > Filesystem Routing.

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.

You can use symlinks (e.g. $ ln -s) to make a directory outside of root crawlable.

If you use Git then Vike skips .gitignore files.

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