Build a sample app

First, create a new cargo project:

  1. cargo new yew-app

Open the newly created directory.

First, let’s add yew as a dependencies in the Cargo.toml file:

  1. [package]
  2. name = "yew-app"
  3. version = "0.1.0"
  4. edition = "2018"
  6. [dependencies]
  7. # you can check the latest version here: https://crates.io/crates/yew
  8. yew = "0.18"

Copy the following template into your src/main.rs file:

  1. use yew::prelude::*;
  3. enum Msg {
  4.     AddOne,
  5. }
  7. struct Model {
  8.     // `ComponentLink` is like a reference to a component.
  9.     // It can be used to send messages to the component
  10.     link: ComponentLink<Self>,
  11.     value: i64,
  12. }
  14. impl Component for Model {
  15.     type Message = Msg;
  16.     type Properties = ();
  18.     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
  19.         Self {
  20.             link,
  21.             value: 0,
  22.         }
  23.     }
  25.     fn update(&mut self, msg: Self::Message) -> ShouldRender {
  26.         match msg {
  27.             Msg::AddOne => {
  28.                 self.value += 1;
  29.                 // the value has changed so we need to
  30.                 // re-render for it to appear on the page
  31.                 true
  32.             }
  33.         }
  34.     }
  36.     fn change(&mut self, _props: Self::Properties) -> ShouldRender {
  37.         // Should only return "true" if new properties are different to
  38.         // previously received properties.
  39.         // This component has no properties so we will always return "false".
  40.         false
  41.     }
  43.     fn view(&self) -> Html {
  44.         html! {
  45.             <div>
  46.                 <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
  47.                 <p>{ self.value }</p>
  48.             </div>
  49.         }
  50.     }
  51. }
  53. fn main() {
  54.     yew::start_app::<Model>();
  55. }

This template sets up your root Component, called Model which shows a button that updates itself when you click it. Take special note of yew::start_app::<Model>() inside main() which starts your app and mounts it to the page’s <body> tag. If you would like to start your application with any dynamic properties, you can instead use yew::start_app_with_props::<Model>(..).

Finally, add an index.html file in the root directory of your app:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>Yew App</title>
  6.     </head>
  7. </html>

Run your app

If you haven’t already, install Trunk:

  1. cargo install trunk wasm-bindgen-cli

If you haven’t already installed it, you need to add the wasm32-unknown-unknown target. To install this with Rustup:

  1. rustup target add wasm32-unknown-unknown

Now all you have to do is run the following:

  1. trunk serve

This will start a development server which continually updates the app every time you change something.

Troubleshooting

  • Trunk’s installation failed:

    Make sure you have the development packages of openssl installed. For example, libssl-dev on Ubuntu or openssl-devel on Fedora.