An HTML templating engine that uses Vue's template syntax. Parses HTML, evaluates JavaScript expressions, and returns rendered output.
cargo add prevuepub fn render(template: impl AsRef<str>, data: impl serde::Serialize) -> prevue::Result<String>data can be any value that implements Serialize.
use prevue::render;
use serde_json::json;
fn main() -> prevue::Result<()> {
let template = r#"
<div>
<a :id="id">link</a>
<p v-if="user.age >= 18">{{ user.name }} is adult</p>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
"#;
let data = json!({
"id": "link-id",
"user": { "name": "James", "age": 28 },
"list": ["a", "b", "c"],
});
let output = render(template, data)?;
// <html><head></head><body><div>
// <a id="link-id">link</a>
// <p>James is adult</p>
// <ul>
// <li>a</li>
// <li>b</li>
// <li>c</li>
// </ul>
// </div>
// </body></html>
Ok(())
}| Syntax | Status | Notes |
|---|---|---|
{{ }} |
✅ | Text interpolation |
v-bind, :attr |
✅ | Attribute binding |
v-if |
✅ | Conditional rendering |
v-else, v-else-if |
✅ | Conditional branches |
v-for |
✅ | List rendering |
v-text |
✅ | Text replacement |
v-html |
✅ | Raw HTML replacement; inserted HTML is not compiled |
v-pre |
✅ | Skip rendering logic |
<template> |
✅ | Structural wrapper |
<script type="prevue"> |
✅ | Render-order setup script |
This library uses html5ever, which follows HTML5 spec strictly:
- Attribute names are lowercased (for example,
:MyAttrbecomes:myattr). - Dynamic binding names are lowercased, so
:[dynamicKey]looks updynamickey. - Output is serialized as a complete HTML document with
<html>,<head>, and<body>.
Object data fields are available as top-level variables. The original data value is also available as $.
{{ user.name }}
{{ $.user.name }}$ is reserved for the full data value. If your data contains a top-level "$" field, access it with $["$"].
<script type="prevue"> runs when rendering reaches it. Helpers defined by a setup script are available to following template expressions, and executed setup scripts are removed from the rendered HTML.
<script type="prevue">
function fullName(user) {
return `${user.first} ${user.last}`;
}
</script>
<p>{{ fullName(user) }}</p>Only type="prevue" scripts are executed by prevue. Regular <script> tags are preserved.
prevue uses Boa to evaluate JavaScript expressions and setup scripts.
- Never use untrusted templates.
- Accessing undeclared identifiers fails expression evaluation instead of returning
undefined. thisis not Vue-compatible and may expose internal scope objects. Avoid usingthisin templates.
MIT