Crate leptos_meta

Expand description

§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, ServerMetaContextOutput::inject_meta_context will inject meta tags into a stream of HTML inside the <head>.

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

ssr Server-side rendering: Generate an HTML string (typically on the server)
tracing Adds integration with the tracing crate.

Important Note: If you’re using server-side rendering, you should enable ssr.

Structs§

BodyProps: Props for the Body component.
Formatter: A function that is applied to the text value before setting document.title.
HashedStylesheetProps: Props for the HashedStylesheet component.
HtmlProps: Props for the Html component.
LinkProps: Props for the Link component.
MetaContext: Contains the current state of meta tags. To access it, you can use use_head.
MetaProps: Props for the Meta component.
MetaTagsProps: Props for the MetaTags component.
ScriptProps: Props for the Script component.
ServerMetaContext: Allows you to add <head> content from components located in the <body> of the application, which can be accessed during server rendering via ServerMetaContextOutput.
ServerMetaContextOutput: Allows you to access <head> content that was inserted via ServerMetaContext.
StyleProps: Props for the Style component.
StylesheetProps: Props for the Stylesheet component.
TitleContext: Contains the current state of the document’s <title>.
TitleProps: Props for the Title component.

Functions§

Body: A component to set metadata on the document’s <body> element from within the application.
HashedStylesheet: Injects an HTMLLinkElement into the document head that loads a cargo-leptos-hashed stylesheet.
Html: A component to set metadata on the document’s <html> element from within the application.
Link: Injects an HTMLLinkElement into the document head, accepting any of the valid attributes for that tag.
Meta: Injects an HTMLMetaElement into the document head to set metadata
MetaTags: During server rendering, inserts the meta tags that have been generated by the other components in this crate into the DOM. This should be placed somewhere inside the <head> element that is being used during server rendering.
Script: Injects an HTMLScriptElement into the document head, accepting any of the valid attributes for that tag.
Style: Injects an HTMLStyleElement into the document head, accepting any of the valid attributes for that tag.
Stylesheet: Injects an HTMLLinkElement into the document head that loads a stylesheet from the URL given by the href property.
Title: A component to set the document’s title by creating an HTMLTitleElement.
provide_meta_context: Provides a MetaContext, if there is not already one provided. This ensures that you can provide it at the highest possible level, without overwriting a MetaContext that has already been provided (for example, by a server-rendering integration.)
use_head: Returns the current MetaContext.

Crate leptos_meta

Crate leptos_meta Copy item path

§Leptos Meta

§Feature Flags

Structs§

Functions§

Crate leptos_meta