Chapter 16. Developing the blockchain client in Vue.js


This chapter covers

  • Reviewing the Vue.js version of the blockchain web client
  • Running a Vue app that works with two servers in dev mode
  • The flow of data, from entering a transaction to generating a block
  • Arranging communications between the blockchain’s client components

In the previous chapter, you learned the basics of Vue, and now we’ll review a new version of the blockchain app with the client portion written in Vue. The source code of the web client is located in the blockchain/client directory, and the messaging server located in the blockchain/server directory.

The code for the server side remains the same as in chapter 14, and the functionality of this version of the blockchain app is the same as well. The UI portion of the app, however, has been completely rewritten in Vue and TypeScript.

We won’t be reviewing the functionality of the blockchain app in this chapter, because we covered that in previous chapters, but we will review the code that’s specific to the Vue library. You may want to look back at chapter 10 to refresh your memory of the functionality of the blockchain client and messaging server.

16.1. Starting the client and the messaging server

16.2. The App component

16.3. The TransactionForm presentation component

16.4. The PendingTransactionsPanel presentation component

16.5. The BlocksPanel and Block presentation components