Learn WebAssembly

Before we start adding Vue components to the application, let's create the HTML and CSS files that house our markup and styles. Create a file in the /src folder named index.html and populate it with the following contents:

<!doctype html>
<html lang="en-us">
<head>
  <title>Cook the Books</title>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/css/uikit.min.css"
  />
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.6/js/uikit-icons.min.js"></script>
  <script src="https://unpkg.com/accounting-js@1.1.1/dist/accounting.umd.js"></script>
  <script src="https://unpkg.com/lodash@4.17.10/lodash.min.js"></script>
  <script src="https://unpkg.com/d3@5.5.0/dist/d3.min.js"></script>
  <script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vue-numeric@2.3.0/dist/vue-numeric.min.js"></script>
  <script src="main.js" type="module"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

We're only using the HTML file to fetch libraries from CDNs, specify a <div> that Vue can render to, and load main.js to start the application. Note the type="module" attribute on the final <script> element. This allows us to use ES modules throughout our application. Now let's add the CSS file. Create a file in the /src folder named styles.css and populate it with the following contents:

@import url("https://fonts.googleapis.com/css?family=Quicksand");

:root {
  --blue: #2889ed;
}

* {
  font-family: "Quicksand", Helvetica, Arial, sans-serif !important;
}

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.addTransactionButton {
  color: white;
  height: 64px;
  width: 64px;
  background: var(--blue);
  position: fixed;
  bottom: 24px;
  right: 24px;
}

.addTransactionButton:hover {
  color: white;
  background-color: var(--blue);
  opacity: .6;
}

.errorText {
  color: white;
  font-size: 36px;
}

.appHeader {
  height: 80px;
  margin: 0;
}

.balanceEntry {
  font-size: 2rem;
}

.tableAmount {
  white-space: pre;
}

This file has only a few classes because most of the styling will be handled at the component level. In the next section, we'll review the Vue components that make up our application.

Table of Contents for
Learn WebAssembly

Adding the web assets

Table of Contents for Learn WebAssembly

Table of Contents for
Learn WebAssembly