Metadata

Metadata refers to Routify's internal data and can be used to add custom data to any route. This data can then be accessed without loading the component.

To add metadata, insert a comment with routify:options

<!-- routify:options index=1 -->

The metadata can then be accessed through $route, $layout and $page

import { route, layout, page } from @roxi/routify

$route.meta //meta from the current page
$page.meta //meta from the current page
$layout.meta //meta from the closest layout

Reserved names

name	type	target
title	string	pages
Sets the name accessed through `$page.title`.
index	number	pages \| layouts
By default nodes are sorted by index, then the filename.
bundle	boolean	layouts
Bundles everything in the current folder into one .js file.
preload	boolean \| string	pages \| layouts
`true:` Include the component in the main .js bundle. `'proximity':` Preload the page when it's referenced in an active url helper.
param-is-page	boolean	pages \| layouts
For dynamic pages/layouts. Recreates component if its parameter changes.
query-params-is-page	boolean	pages \| layouts
For all pages/layouts. Recreates component if query parameters change.
reset	boolean	pages \| layouts
Disables layout inheritance

Example

Using a custom published prop to filter nodes and a custom tags prop to display tags.

<!-- routify:options tags=["recipes", "cupcakes"] -->
<!-- routify:options published=true -->

<script>
  import { layout } from @roxi/routify
</script>

{#each $layout.parent.children.filter(c => c.published) as node}
   <div class="card">
     <h3>{node.title}</h3>
     <h5>{node.meta['tags'].join(', ')}</h5>
     <a href={$url(node.path)}>Goto</a>
   </div>
{/each}

Realworld example

Routify blog index

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.