Directive Reference

File declarations

• @page declares a page file.
• @layout Name(...) declares a layout file.
• @component Name(...) declares a component file.
• @document declares the global document file.

Page-only directives

• @use Name(...) attaches a layout to a page.
• @paginate alias by n generates paginated routes.
• @seo defines SEO metadata.

Shared directives

• @import Name imports a component.
• @import folder/* imports all components in a folder.
• @load source loads JSON data.
• @load source as alias loads JSON data under an alias.
• @data defines local data.
• @style adds inline CSS.
• @script adds inline JavaScript.
• @if starts conditional rendering.
• @elseif adds a conditional branch.
• @else adds a conditional fallback.
• @for starts loop rendering.
• @end closes a block.
• @code outputs escaped code.
• @endcode closes a raw code block.

Important note

Pages use @use for layouts in the current implementation.

Example:

@page
@use Main(title=page.title)