There seems to be no examples of importing JavaScript. Can you tell me how to import JavaScript into the Leptos project #1471

lhjok · 2023-07-30T10:34:15Z

lhjok
Jul 30, 2023

There seems to be no examples of importing JavaScript. Can you tell me how to import JavaScript into the Leptos project

stewartadam · 2023-07-31T01:35:57Z

stewartadam
Jul 31, 2023

You would likely need to put the JavaScript file under the asset folder then include it in the HTML output by Leptos. In your App component function you would add a <script> tag. For example:

#[component]
pub fn App() -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
    provide_meta_context();

    view! {
        // injects a stylesheet into the document <head>
        // id=leptos means cargo-leptos will hot-reload this stylesheet
        <Stylesheet id="leptos" href="/pkg/style.css"/>

        // sets the document title
        <Title text="Welcome to Leptos"/>

        // content for this welcome page
        <Router>
            <main>
                <Routes>
                    <Route path="" view=|| view! { <HomePage/> }/>
                </Routes>
            </main>
        </Router>
        <script src="/js/script.js"></script>
    }
}

Assuming that you have a js folder and script.js within it created in your asset directory.

0 replies

gbj · 2023-07-31T12:24:32Z

gbj
Jul 31, 2023
Maintainer

We had the same discussion on Discord. For anyone future readers: wasm-bindgen is how you import JavaScript into any Rust/WASM project so that you can call it from Rust https://rustwasm.github.io/wasm-bindgen/examples/import-js.html

6 replies

gbj Feb 15, 2024
Maintainer

@qrilka Sounds good. Would you be interested in contributing one?

qrilka Feb 15, 2024

I'll try to find some time for that

qidian99 Feb 19, 2024

any updates?

In my case I'd call a js callback on state update, e.g.,

        <script>
            hljs.highlightAll();
        </script>

qrilka Feb 19, 2024

could you share a small js example maybe? From the snippet it's not clear what library you use

gbj Feb 19, 2024
Maintainer

@qidian99 I would strongly recommend reading the wasm-bindgen docs linked above on how to use JS functions from Rust/WASM. I've added a section to the Leptos book but there's nothing really Leptos-specific here at all.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

There seems to be no examples of importing JavaScript. Can you tell me how to import JavaScript into the Leptos project #1471

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 6 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

There seems to be no examples of importing JavaScript. Can you tell me how to import JavaScript into the Leptos project #1471

Uh oh!

lhjok Jul 30, 2023

Replies: 2 comments · 6 replies

Uh oh!

stewartadam Jul 31, 2023

Uh oh!

gbj Jul 31, 2023 Maintainer

Uh oh!

gbj Feb 15, 2024 Maintainer

Uh oh!

qrilka Feb 15, 2024

Uh oh!

Uh oh!

qidian99 Feb 19, 2024

Uh oh!

qrilka Feb 19, 2024

Uh oh!

gbj Feb 19, 2024 Maintainer

lhjok
Jul 30, 2023

Replies: 2 comments 6 replies

stewartadam
Jul 31, 2023

gbj
Jul 31, 2023
Maintainer

gbj Feb 15, 2024
Maintainer

gbj Feb 19, 2024
Maintainer