The contents of the template property, which dictates what to render, are shown as follows:

template: `
  <div class="flex column">
   <h1>SPACE WASM!</h1>
    <canvas
      ref="canvas"
      :height="bounds.height"
      :width="bounds.width">
    </canvas>
    <div class="flex controls">
      <div>
        <button class="defaultText" @click="onActionClick">
          Pause
        </button>
      </div>
    <div class="flex column">
      <label class="defaultText" for="speed">Speed: {{speed}}</label>
      <input
        v-model="speed"
        id="speed"
        type="range"
        min="1"
        max="10"
        step="1">
    </div>
  </div>
</div>

Since we're using Vue, we can bind the attributes and event handlers of HTML elements to properties and methods defined in our component. In addition to a PAUSE/RESUME button, there's a range <input> that allows you to change the speed. By sliding it to the left or right, you're able to slow down or speed up the spaceship and see the changes reflected immediately. That concludes our review; let's see how Webpack can be used to build or run the application.