We need an entry point to load our application. Create a file in the /src folder named main.js and populate it with the following contents:

import App from './components/App.js';
import { store, initializeStore } from './store/store.js';

// This allows us to use the <vue-numeric> component globally:
Vue.use(VueNumeric.default);

// Create a globally accessible store (without having to pass it down
// as props):
window.$store = store;

// Since we can only pass numbers into a Wasm function, these flags
// represent the amount type we're trying to calculate:
window.AMOUNT_TYPE = {
  raw: 1,
  cooked: 2
};

// After fetching the transactions and initializing the Wasm module,
// render the app.
initializeStore()
  .then(() => {
    new Vue({ render: h => h(App), el: '#app' });
  })
  .catch(err => {
    console.error(err);
  });

This file is loaded after the libraries are fetched and loaded from CDNs in /src/index.html. We use the global Vue object to specify that we want to use the VueNumeric component. We add the store object exported from /store/store.js to window as $store. This isn't the most robust solution, but will be sufficient given the scope of the application. If you were creating a production application, you'd use a library like Vuex or Redux for global state management. We'll forego this approach in the interest of keeping things simple.

We also added AMOUNT_TYPE to the window object. This was done to ensure the entire application can reference the AMOUNT_TYPE value, rather than specify a magic number. After values are assigned to window, the initializeStore() function is called. If the initializeStore() function fired successfully, a new Vue instance is created to render the application. Let's add the web assets next, then move on to the Vue components.