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 -->
<!-- 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
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 new 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 new boolean pages | layouts
For dynamic pages/layouts. Recreates component if its parameter changes.
query-params-is-page new boolean pages | layouts
For all pages/layouts. Recreates component if query parameters change.

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