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:

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

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

See also