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::*;
use leptos_meta::*;
#[component]
fn MyApp(cx: Scope) -> impl IntoView {
let (name, set_name) = create_signal(cx, "Alice".to_string());
view! { cx,
<Title
// reactively sets document.title when `name` changes
text=name
// applies the `formatter` function to the `text` value
formatter=|text| format!("“{text}” is your name")
/>
<main>
<input
prop:value=name
on:input=move |ev| set_name(event_target_value(&ev))
/>
</main>
}
}