Vue JS — Building a Financial Application step by step
During this post, I would like to build with you a Vue.js Financial Application to retrieve Financial Statements and stock prices from a free API .
At the end of the post, if you follow along, you will build something similar as shown in below image.
In the top side, we will have a search bar to enter any company we want to look for. Below the search form, we will have the stock price of the given company.
The graph in the left will display the Yearly revenues of the last 4 years. The table in the right will show the income statement of the company given from the last two periods.
All what you need is Node and Vue.JS installed. We will use Bootstrap Vue to make the page look nicer and Axios to make an http request. For the plot, we will use a package called Echart.
Initialising the Vue JS Application
First of all, ensure that you have Node JS and Vue JS installed. If you have Node Js you can simply use the npm command from the terminal to install Vue JS. You can follow the instructions provided in the Vue.js documentation.
Let’s start the fun by creating a new project folder in your Desktop that will contain all files of the project. I will call the folder web_vue.
Then, open the terminal in the folder that we just created and run below command to have the Vue JS project created automatically for us:
vue create financials
During the creation stage, we will need to manually select the features that we want to have installed in our project. For our financial application, I have selected Babel and Router. Then, store all config files in package.json file.
This will create a Vue.js project call Financials and all required setup and config files. Now in the terminal, cd to the new financials folder and run the server to see the starting Vue.js template created for us:
cd financials
npm run serve
By accessing the localhost page in the browser, we can see the landing Vue JS build-in page of our project. Let’s remove the starting page provided by Vue JS and start building our own.
Before getting into the coding part, lets install all other packages that we will to build the application. If the server is running, stop it in the terminal using ctrl + c and then run the following commands to start the installation:
npm install axios
npm install bootstrap-vue
npm install echarts vue-echarts
Below, you can find the link to the documentation of the packages that we just installed:
Coding our Vue JS Financial Application
Next, let’s start to build our own code in the source code editor that you normally use. Let’s add all installed packages so that they are recognised by our Vue.js Application. For Echarts, we need to create a new folder named plugins within the src folder and a new file named “ echarts.js”. Then, within the “ echarts.js” file we can add below configuration code so that Vue JS components are able to use echarts:
Then, we also need to configure Bootstrap and Echarts within the main.js file. Import Bootstrap and Echarts as per below.
After adding Bootstrap and Echarts, you should have something similar to below code as part of the main.js file.
After importing all required files, we need to rename the HelloWorld.vue file created when we initiated the project to mainPage.vue. Then, we are ready to add our html code, script logic and style section.
Since we have changed the name of the component from HelloWorld.vue to mainPage.vue, we also need to update our Home.vue view. Within the first div with class home, we include the name of our mainPage component.
Then, in Home.vue import mainPage.vue from components/mainPage.vue so that it can be render by Vue.js when we initialise our server.
Having updated the view Home.vue , we can move to our mainPage component. To make things easier for you to follow, and since the mainPage.vue component has over 130 lines of code, I have divided the code into three sections, template, script and style. I will explain one by one below.
If something is not clear, please write a comment or watch my video tutorial in Youtube where I explain step by step how to build the application:
Within our template section in the mainPage.vue component, we will dynamically display the stock name and price that we passed in our Search form by using this.stock within the container tag.
Our form submission will trigger the updateStock method that will pass the name of stock as an argument to make a GET request to the API End Point.
Finally, we also include a v-if directive to ensure that the content is only display in the html template if loaded = True. Note that in our script section shown below, loaded is only turn to True when the API call has been executed successfully through the method updateStock, and therefore, we have data to build the b-table and the chart.
Hope the template part is clear. Now, let’s move to the script section. First we import axios to make http calls and initialise all required variables within our data function.
Within our methods section, we will create first the updateStock method that will let us get all financials by making an http request through Axios to the API end point. Then we parse the response to extract the financials we need.
Creating our table
For our table, we create an array called that will include all income statement elements. We then convert the numbers to a more friendly formatting by applying the formatNumber(number) function. The array fields contain the names of the headers of the table. Then, we passed these two arrays into our HTML template by using the vue-bootstrap tag b-table.
Creating our bar chart
Now, we can move to the chart part. As mentioned before, we use a package called echarts. We extract the required data for our chart through the plotStock method. In this case, we need the date for the x axis and the Revenue for the y axis. We can easily extract them from the allfinancials array that we created when the updateStock method was triggered.
We passed the arrays to the xaxis and yaxis objects as data. The type of graph will be a bar chart, so we also pass it as a value to the series array. Finally, we include the title within the Title object.
The plotStock method is called from the updateStock method. Therefore, we will have all required data for the chart when in our application we submit the form with the ticker value. Then, the in the html template will ensure that the chart is created based on the values included in the ChartOptionsBar object that was created in the plotStock method.
Getting the stock price
Finally, we create a stockPrice method to get from the API the stock price of the company passed in the Search form and store it in a variable named stockprice that will be display in the html template.
Adding some stiles
To conclude the application, we can add a few styles to our mainPage.vue, below the closing script tag:
Now, we have all required code. Simply run npm run serve in the terminal and enjoy your new Vue.js Financial Application.
That is all what we need to do in order to build an amazing Vue.js Financial Application.
As mentioned above, please feel free to add your comments if something is unclear or watch the Youtube video to code along with me.
Originally published at https://codingandfun.com on January 26, 2020.
