Ream

Ream has a file-system based router which supports Vue-powered pages and server routes.

Pages

In Ream, pages are Vue Components exported from .js, .ts or .vue files in the pages directory. Each page is associated with a route based on its file name.

Example: If you create pages/about.vue that exports a Vue component like below, it will be accessible at /about.

<template>
  <div>About</div>
</template>

Dynamic Routing

Defining routes by using predefined paths is not always enough for complex applications. In Ream you can add brackets to a page ([param]) to allow dynamic path parameters (a.k.a. url slugs, like :param in Express-like server framework).

Consider the following page pages/post/[pid].vue:

<template>
  <p>Post: {{ $route.params.pid }}</p>
</template>

Any page like /post/1, /post/abc, etc. will be matched by pages/post/[pid].vue. The matched value will be sent as a route parameter to the page.

For example, the page /post/abc will have the following params object:

{ "pid": "abc" }

Multiple dynamic route segments work the same way. The page pages/post/[pid]/[comment].vue will match the route /post/abc/a-comment and its parameters will be:

{ "pid": "abc", "comment": "a-comment" }

Catch all Routes

Path parameter can be extended to catch all paths by adding three dots (...) inside the brackets. For example:

• pages/post/[...slug].vue matches /post/a, but also /post/a/b, /post/a/b/c and so on.

Matched parameters will be sent as a route parameter (slug in the example) to the page, and it will always be a string, so, the path /post/a/b/c will have the following params object:

{ "slug": "a/b/c" }

Nested Routes

Vue Router's nested routes feature is also supported.

/user/johnny/profile                         /user/johnny/posts
+-----------------------------+              +---------------------------+
| user/[user].vue             |              | user/[user].vue           |
| +-------------------------+ |              | +-----------------------+ |
| | user/[user]/profile.vue | |  +-------->  | | user/[user]/posts.vue | |
| |                         | |              | |                       | |
| +-------------------------+ |              | +-----------------------+ |
+-----------------------------+              +---------------------------+

To create children pages, put them in a folder with the same name as the parent page, for example:

- user/[user].vue
- user/[user]/profile.vue
- user/[user]/posts.vue
- user/[user]/index.vue

..is equivalent to following routes in vue-router:

;[
  {
    path: '/user/:user',
    component: loadComponent('user/[user].vue'),
    children: [
      {
        path: 'profile',
        component: loadComponent('user/[user]/profile.vue'),
      },
      {
        path: 'posts',
        component: loadComponent('user/[user]/posts.vue'),
      },
      {
        path: '',
        component: loadComponent('user/[user]/index.vue'),
      },
    ],
  },
]