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

Note that 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

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 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>)

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 is different from the list of ignored directories because it's ignored not only by Filesystem Routing but also by config inheritance. It's the only directory that is 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