In the previous tutorial, you built the backend server for an invoicing application. In this tutorial, you will build the part of the application that users will interact with, known as the user interface.
Note: This is Part 2 of a 3-part series. The first tutorial is How To Build a Lightweight Invoicing App with Node: Database and API. The third tutorial is How To Build a Lightweight Invoicing App with Vue and Node: JWT Authentication and Sending Invoices.
The user interface in this tutorial will be built with Vue and allow users to log in to view and create invoices.
To complete this tutorial, you will need:
This tutorial was verified with Node v16.1.0, npm
v7.12.1, Vue v2.6.11, Vue Router v3.2.0, axios
v0.21.1, and Bootstrap v5.0.1.
You can use @vue/cli
to create a new Vue.js project.
Note: You should be able to place this new project directory next to invoicing-app
directory you created in the previous tutorial. This introduces a common practice of separating server
and client
.
In your terminal window, use the following command:
This will use the inline preset configuration for creating a Vue.js Project with Vue Router.
Navigate to the newly created project directory:
Start the project to verify that there are no errors.
If you visit the local app (typically at localhost:8080
) in your web browser, you will see a "Welcome to Your Vue.js App"
message.
This creates a sample Vue
project that we’ll build upon in this article.
For the frontend of this invoicing application, a lot of requests are going to be made to the backend server.
To achieve this, we’ll make use of axios. To install axios
, run the command in your project directory:
To allow some default styling in the application, you will make use of Bootstrap
.
First, open the public/index.html
file in your code editor.
Add the CDN-hosted CSS file for Bootstrap to the head
of the document:
Add the CDN-hosted JavaScript files for Popper and Bootstrap to the head
of the document:
You can replace the contents of App.vue
with the following lines of code:
And you can ignore or delete the src/views/Home.vue
, src/views/About.vue
, and src/components/HelloWorld.vue
files that were automatically generated.
At this point, you have a new Vue project with Axios and Bootstrap.
For this application, you are going to have two major routes:
/
to render the login page/dashboard
to render the user dashboardTo configure these routes, open the src/router/index.js
and update it with the following lines of code:
This specifies the components that should be displayed to the user when they visit your application.
Components allow the frontend of your application to be more modular and reusable. This application will have the following components:
The Header
component displays the name of the application and Navigation
if a user is signed in.
Create a Header.vue
file in the src/components
directory. The component file has the following lines of code:
The Header component has a single prop
called user
. This prop
will be passed by any component that will use the header component. In the template for the header, the Navigation
component is imported and conditional rendering is used to determine if the Navigation
should be displayed or not.
The Navigation
component is the sidebar that will house the links of different actions.
Create a new Navigation.vue
component in the /src/components
directory. The component has the following template:
Next, open the Navigation.vue
file in your code editor and add the following lines of code:
The component is created with two props
: the name of the user and the name of the company. The setActive
method will update the component calling the parent of the Navigation
component, in this case, Dashboard
, when a user clicks on a navigation link.
The SignUp
component houses the sign up and sign in form. Create a new file in /src/components
directory.
First, create the component:
The Header
component is imported and the data properties of the components are also specified.
Next, create the methods to handle what happens when data is submitted:
The validate()
method performs checks to make sure the data sent by the user meets our requirements.
The register
method of the component handles the action when a user tries to register a new account. First, the data is validated using the validate
method. Then if all criteria are met, the data is prepared for submission using the formData
.
We’ve also defined the loading
property of the component to let the user know when their form is being processed. Finally, a POST
request is sent to the backend server using axios
. When a response is received from the server with a status of true
, the user is directed to the dashboard. Otherwise, an error message is displayed to the user.
The login
method is similar to the register
method. The data is prepared and sent over to the backend server to authenticate the user. If the user exists and the details match, the user is directed to their dashboard.
Now, take a look at the template for registration:
The login in form is shown above and the input fields are linked to the respective data properties specified when the components were created. When the submit button of the form is clicked, the login
method of the component is called.
Usually, when the submit button of a form is clicked, the form is submitted via a GET
or POST
request. Instead of using that, we added <form @submit.prevent="login">
when creating the form to override the default behavior and specify that the login function should be called.
The registration form also looks like this:
The @submit.prevent
is also used here to call the register
method when the submit button is clicked.
Now, run your development server using this command:
Visit localhost:8080
in your browser to observe the newly created login and registration page.
Note: When experimenting with the user interface, you will need to have the invoicing-app
server running. Furthermore, you may encounter a CORS (cross-origin resource sharing) error that you may need to address by setting Access-Control-Allow-Origin
headers.
Experiment with logging in and registering new users.
The Dashboard component will be displayed when the user gets routed to the /dashboard
route. It displays the Header
and the CreateInvoice
component by default.
Create the Dashboard.vue
file in the src/components
directory. The component has the following lines of code:
Below the template, add the following lines of code:
The CreateInvoice
component contains the form needed to create a new invoice. Create a new file in the src/components
directory:
Edit the CreateInvoice
component to look like this:
This creates a form that accepts the name of the invoice and displays the total price of the invoice. The total price is obtained by summing up the prices of individual transactions for the invoice.
Let’s take a look at how transactions are added to the invoice:
A button is displayed for the user to add a new transaction. When the Add Transaction button is clicked, a modal is shown to the user to enter the details of the transaction. When the Save Transaction button is clicked, a method adds it to the existing transactions.
The existing transactions are displayed in a tabular format. When the Delete button is clicked, the transaction in question is deleted from the transaction list and the Invoice Price
is recalculated. Finally, the Create Invoice
button triggers a function that then prepares the data and sends it to the backend server for the creation of the invoice.
Let’s also take a look at the component structure of the Create Invoice
component:
First, you defined the data properties for the component. The component will have an invoice object containing the invoice name
and total_price
. It’ll also have an array of transactions
with the nextTxnId
index. This will keep track of the transactions and variables to send status updates to the user.
The methods for the CreateInvoice
component are also defined here. The saveTransaction()
method takes the values in the transaction form modal and then adds them to the transaction list. The deleteTransaction()
method deletes an existing transaction object from the list of transactions while the calcTotal()
method recalculates the total invoice price when a new transaction is added or deleted.
Finally, the onSubmit()
method will submit the form to the backend server. In the method, formData
and axios
are used to send the requests. The transaction array containing the transaction objects is split into two different arrays. One array holds the transaction names and the other holds the transaction prices. The server then attempts to process the request and send back a response to the user.
When you go back to the application on localhost:8080
and sign in, you will get redirected to a dashboard.
Now that you can create invoices, the next step is to create a visual picture of invoices and their statuses. To do this, create a ViewInvoices.vue
file in the src/components
directory of the application.
Edit the file to look like this:
The template above contains a table displaying the invoices a user has created. It also has a button that takes the user to a single invoice page when an invoice is clicked.
The ViewInvoices
component has its data properties as an array of invoices and the user details. The user details are obtained from the route parameters. When the component is mounted
, a GET
request is made to the backend server to fetch the list of invoices created by the user which are then displayed using the template that was shown earlier.
When you go to the /dashboard
, click the View Invoices option on the Navigation
to see a listing of invoices and payment status.
In this part of the series, you configured the user interface of the invoicing application using concepts from Vue.
Continue your learning with How To Build a Lightweight Invoicing App with Vue and Node: JWT Authentication and Sending Invoices.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
I am new to this so bear with me, but it looks like there are some mixups with the SignIn and SignUp components. For example, you are exporting the SignIn.vue component by the name of “SignUp”. There was also no walkthrough starting the SignUp component but there was a section of your code referencing it. Any guidance you could offer is appreciated!