leptos_meta 0.7.0-gamma3

Tools to set HTML metadata in the Leptos web framework.
Documentation

Leptos Meta

Leptos Meta allows you to modify content in a document’s <head> from within components using the Leptos web framework.

Document metadata is updated automatically when running in the browser. For server-side rendering, after the component tree is rendered to HTML, [MetaContext::dehydrate] can generate HTML that should be injected into the <head> of the HTML document being rendered.

use leptos::prelude::*;
use leptos_meta::*;

#[component]
fn MyApp() -> impl IntoView {
// Provides a [`MetaContext`], if there is not already one provided.
provide_meta_context();

let (name, set_name) = create_signal("Alice".to_string());

view! {
<Title
// reactively sets document.title when `name` changes
text=move || name.get()
// applies the `formatter` function to the `text` value
formatter=|text| format!("“{text}” is your name")
/>
<main>
<input
prop:value=move || name.get()
on:input=move |ev| set_name.set(event_target_value(&ev))
/>
</main>
}
}

Feature Flags

  • csr Client-side rendering: Generate DOM nodes in the browser
  • ssr Server-side rendering: Generate an HTML string (typically on the server)
  • hydrate Hydration: use this to add interactivity to an SSRed Leptos app
  • stable By default, Leptos requires nightly Rust, which is what allows the ergonomics of calling signals as functions. Enable this feature to support stable Rust.

Important Note: You must enable one of csr, hydrate, or ssr to tell Leptos which mode your app is operating in.