Filesystem Routing

Vike supports Filesystem Routing: the URL of a page is determined by where the page is located on your filesystem.

FILESYSTEM                     URL
====================           ======
pages/about/+Page.js           /about
pages/faq/+Page.js             /faq

You can use a Route String or Route Function to override the route of a page determined by Filesystem Routing.

Paramterized routes

You can define parameterized routes:

FILESYSTEM                     URL
========================       ===========================
pages/movie/@id/+Page.js       /movie/123, /movie/abc, ...

The parameter id is available at pageContext.routeParams.id.

Case sensitive

Filesystem Routing is case senstive:

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

Ignored directories

Following directories are ignored:

  • index/
  • pages/
  • src/
  • (someDir)/ (any directory wrapped with 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

This enables you to set up a domain-driven file structure: Guides > File Structure > Domain driven.

Instead of (someDir) you can also use the filesystemRoutingRoot setting.

Crawl

Vike crawls all files inside Vite's root directory.

In other words: all your + files need to live inside root.

You can use a soft symlink ($ ln -s) to make a directory outside of root crawlable.

If you use Git then Vike skips .gitignore files.

See also