# Components: .vyx

A `.vyx` file is one component: a script block of ordinary Vyrn and a template block of markup. A generator compiles it while the program builds, so it is a library, not a compiler feature.

## Script and template

The `<script>` block is ordinary Vyrn: imports, types, the functions the template calls. The `<template>` block is the view. [std/vyx](https://vyrn-lang.github.io/docs/std/vyx.html) compiles the pair to a Vyrn module while the importing program builds, and `vyrn emit-gen` prints exactly what it wrote.

A route component can also export `head()` for the document's title and `data()` for what the page needs; the server runs `data()` and the template renders its answer.

## Template syntax

`{{ x }}` puts a value into the page, escaped. `:href="f(x)"` binds an attribute to an expression. `v-for` repeats an element over an array, and `:key` tells the differ which repeated element is which. `v-html` splices a `Markup`: a tree rendered by `toMarkup`, or markup the program owns, marked `TrustedMarkup`. A `String` there is refused.

A tag with a capital letter is a component you imported, and its attributes are the props: `<Icon name="bytesize:search"/>` is a function call written as markup.

## This site's routes

Every page of this site is a `.vyx` route compiled by the same generator, including this one. The [reference page](https://vyrn-lang.github.io/docs/std/vyx.html) lists the whole template surface.

---

From https://vyrn-lang.github.io/web/components.html — generated by `site/export.vyrn` from the Vyrn repository.